I was recently asked to provide sorting on a ListView that I knew needed it, but had left off originally because I was having trouble with the way I normally handle sorting ListViews with this particular page. This led me to searching for another way. I think what I came up with may replace the way I have been handling user requested sorting (all server side) up until now.
Demo | Download (ASP.NET 3.5)
End Product:
What I found was the jQuery TableSorter plugin plus a few extras. The plugin, like just about all jQuery plugins is really easy to use. You just point it at your table and it does the rest (make sure your table has thead and tbody tags though). Of course there are many options that you can set for your particular situation. In my case this is what I used:
<script type="text/javascript">
$(document).ready(function() {
$("#yui").tablesorter({ sortList: [[0, 0]], widgets: ['zebra'] });
});
</script>
On document ready, my table "yui" is being selected and "tablesorter" is called with some options. The "sortList" option sets an initial sort, in this case the first column with an ascending sort. The "widget" being called is the built in "zebra" widget which handles the alternate row striping. Notice in the demo that when the columns are sorted, the alternate row striping remains correct. If you set your own striping and you don't use the widget you will run into problems when the rows are sorted because your striping will go with the row to wherever it is in the sort.
The second thing I did to my ListView was to add the client side filtering which I found here TableSorter: Filter Results Based on Search Query. To use the filtering you have to use their modified version of the tablesorter.js file. So after adding the filtering my jQuery looks like:
<script type="text/javascript">
$(document).ready(function() {
$("#yui").tablesorter({ debug: false, sortList: [[0, 0]], widgets: ['zebra'] })
.tablesorterFilter({ filterContainer: $("#filterBox"),
filterClearContainer: $("#filterClear"),
filterColumns: [0, 1, 2, 3],
filterCaseSensitive: false
});
});
</script>
The function "tablesorterFilter" is now being called with some required settings. The "filterContainer" tells the plugin which text box contains the data to search for. The "filterClearContainer" tells the plugin which dom element should clear the "filterContainer" (Note: the cross icon is from a great creative commons set). The "filterColumns" setting tells the plugin which columns you want to search. In my case I am having it search the ID, Contact Name, Contact Title and Country columns. Finally you can set whether the search should be case sensitive or not.
All in all I am really happy with the start. I still want to mess around with the following mods/add-ons which look interesting.
Be sure to checkout the demo and let me know what you think in the comments. Do you know of any gotchas involving the plugin or know of any mods/add-ons I haven't mentioned?
Subscribe