Jquery TableSorter 2.0 - Revert Sort order

Question

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 is sorted by one column, it sorts. Now, upon clicking a "Revert Sort" link outside the table, the tablesorter should revert to the initial sort order, even if it sorted multiple coumns before. How can we achieve this?

Thanks

Answer 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();
});

function resetTable() {
  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)

Answer 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