Menu
I am looking for a way to exclude a single column from being sorted using jQuery's tablesorter plugin. Specifically, I have a fairly large table and would like to keep a "row number" column fixed so that it is easy to see what position in the table a particular row is, after sorting.
For example:
# name
-----------
1 papaya
2 apple
3 strawberry
4 banana
When sorted on the name column, should result in:
# name
-----------
1 apple
2 banana
3 papaya
4 strawberry
Thanks.
593
Here is a widget you can use that will accomplish what you are looking for:
$(function() {
// add new widget called indexFirstColumn
$.tablesorter.addWidget({
// give the widget a id
id: "indexFirstColumn",
// format is called when the on init and when a sorting has finished
format: function(table) {
// loop all tr elements and set the value for the first column
for(var i=0; i < table.tBodies[0].rows.length; i++) {
$("tbody tr:eq(" + i + ") td:first",table).html(i+1);
}
}
});
$("table").tablesorter({
widgets: ['zebra','indexFirstColumn']
});
});
For those who find this while looking for a way to exclude a column from being sortable (i.e. clickable header on the column), the below example excludes column 4 (zero-indexed) from being sorted):
$("table").tablesorter({
headers: {4: {sorter: false}}
});
Edit: I've made a sample of this technique at http://jsbin.com/igupu4/3. Click any column heading to sort...
While I don't have an answer to your question about jquery, here's an alternate way to get the specific behaviour you described here, fixed row numbers after sorting. (Using CSS, specifically the content property, and counter related properties/functions.)
<html>
<head>
<title>test</title>
<style type="text/css">
tbody tr
{
counter-increment : rownum ;
}
tbody
{
counter-reset: rownum;
}
table#sample1 td:first-child:before
{
content: counter(rownum) " " ;
}
table#sample2 td.rownums:before
{
content: counter(rownum) ;
}
</style>
<script src="jquery-1.2.6.min.js" ></script>
<script src="jquery.tablesorter.min.js" ></script>
<script>
$(document).ready(function()
{
$("table").tablesorter();
}
);
</script>
</head>
<body>
<table id="sample1">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</thead>
<tbody>
<tr>
<td>
<p>foo</p>
</td>
<td>
<p>quuz</p>
</td>
</tr>
<tr>
<td>bar</td>
<td>quux</td>
</tr>
<tr>
<td>baz</td>
<td>baz</td>
</tr>
</tbody>
</table>
<table id="sample2">
<thead>
<tr>
<th>Rownums</th>
<th>Col 1</th>
<th>Col 2</th>
<th>More Rownums</th>
</thead>
<tbody>
<tr>
<td class="rownums"></td>
<td>
<p>foo</p>
</td>
<td>
<p>bar</p>
</td>
<td class="rownums"></td>
</tr>
<tr>
<td class="rownums"></td>
<td>quuz</td>
<td>baz</td>
<td class="rownums"></td>
</tr>
<tr>
<td class="rownums"></td>
<td>fred</td>
<td>quux</td>
<td class="rownums"></td>
</tr>
</tbody>
</table>
</body>
</html>
If your browser is sufficiently CSS2.1 compatible, you can use tr:before instead of td:first-child:before in sample 1. (Mozilla only supports this in trunk for now...)
In sample 2, you can see how to position your row-number columns anywhere, not just in the first column.
5
$("table").tablesorter({
headers: {4: {sorter: false},8: {sorter: false}}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
