Skip to content Skip to sidebar Skip to footer

Jquery Tablesorter 2.0 - Revert Sort Order

All, I am using the JQuery TableSorter Plugin. The table sorts fine for the selected columns. Consider that when the page loads, there is no sorting taking place. Now, if the table

Solution 1:

So by "there is no sorting taking place" you mean you just do

$("#myTable").tablesorter();

And after a click on a link you want the table to look like just after this call with no sorting done?

I don't think there is an easy way to do this. But I provide a hack how this could be done, but beware depending on the size of your table this might use up a good amount of browser memory.

The idea is to copy the table before you apply the tablesorter plugin. Later when clicking the link just restore the table as it was and reapply tablesorter. e.g.

var tablebackup;
$(document).ready(function() {
  tablebackup = $("#myTable").clone();
  $("#myTable").tablesorter();
});

functionresetTable() {
  tablebackup.clone().insertAfter("#myTable");
  $("#myTable").remove();
  $("#myTable").tablesorter();
}

Check this for a full working example http://jsbin.com/ujiko (no css or anything but works)

Solution 2:

Thanks a bunch.. It Works like a charm if there's one table on the page. If I have nested tabs with a table in each, this seems to work only for the table in the last tab.

Following is the PHP code I have to generate this JS on fly when nested JQuery UI tabs are generated:

echo'<script type="text/javascript">';
                echo'function resetTable() {';
                echo'tablebackup.clone().insertAfter("#table'.$i.'");';
                echo'$("#table'.$i.'").remove();';
                echo'$("#table'.$i.'").tablesorter({widthFixed: true, widgets: [\'zebra\']})
                      .tablesorterPager({container: $("#pager'.$i.'")});';
                echo'}';

                echo'$(document).ready(function() {';
                echo"$('#fragment-2').tabs();";
                echo'tablebackup = $("#table'.$i.'").clone();';
                echo'$("#table'.$i.'").tablesorter({widthFixed: true, widgets: [\'zebra\']})
                      .tablesorterPager({container: $("#pager'.$i.'")});';                    
                echo"});";
                echo"</script>";

Any ideas on fixing this?

Thanks

Post a Comment for "Jquery Tablesorter 2.0 - Revert Sort Order"