I am using the jQuery tablesorter plugin. I know how to disable sorting on a column by using the jQuery Metadata plugin:
<th class="{sorter: false}">Don't sort me</th>
But I 开发者_StackOverflow社区would rather do this by setting a class, so I don't have to use an additional plugin. Also I think I would remember the class name easier than remembering this JSON syntax. How can I do the same same thing using this syntax:
<th class="not-sortable">Don't sort me</th>
You shouldn't have to modify the source of the plugin. Assuming your th
class for not sorting is called nosort
:
function setupTablesorter() {
$('table.tablesorter').each(function (i, e) {
var myHeaders = {}
$(this).find('th.nosort').each(function (i, e) {
myHeaders[$(this).index()] = { sorter: false };
});
$(this).tablesorter({ widgets: ['zebra'], headers: myHeaders });
});
}
I agree, inline JSON was weird. If you're using tablesorter v2.3 or later, you can actually use data roles to do the same thing - and not have to use the metadata plugin:
<th data-sorter="false">...</th>
Much cleaner. Note, however, that it requires jQuery.
For more info & a demo: http://mottie.github.io/tablesorter/docs/example-parsers-jquery-data.html
All the best!
- Ben
I think the only way to get this to work is modifying the source code of the plugin.
At jquery.tablesorter.js
, Line 483:
function checkHeaderMetadata(cell) {
if (($.metadata) && ($(cell).metadata().sorter === false)) {
return true;
};
return false;
}
Change this code to:
function checkHeaderMetadata(cell) {
if ((($.metadata) && ($(cell).metadata().sorter === false)) || $(cell).hasClass("not-sortable")) {
return true;
};
return false;
}
Now the function checkHeaderMetadata
is also returning true, if the cell has a class named not-sortable
.
As of version 2.0.x you can decide at initialisation, which column to not sort.
Add a property called headers
and foreach desired column the property sorter
with the value false
. Counting columns starts at 0
.
jQuery('#element').tablesorter({
headers: {
// first column
0: {
sorter: false
},
// third column
2: {
sorter: false
}
}
});
Example taken from the docs.
精彩评论