jQuery Tablesorter plugin - how to save the state when leaving the page

Question

I'm using jQuery Tablesorter plugin, it works fine. However there is a problem. Imagine that you have some sorting order, but you want to live the page and come back shortly. Unfortunately when you come back you will get the initial sorting order which is simply wrong. So I was trying to find a clue how to save the state of Tablesorter (remember the sorting choice when leaving the page) in some variable and pass it via URL using _GET in php. Any ideas and help will be appreciated.

I did a little research and found out the following:
1.You can read the current sortlis

     <script>
    $(window).unload( function () {   
    var sortList;  
    $(table).tablesorter().bind("sortEnd", function(sorter)   
    {      
        sortList = sorter.target.config.sortList;  
        $_GET['sortList'] = sortList;  
    });   
    }  
    );
    </script>

2.I've tried to save the sortlist like above and read it when page loads:

<script>  
$(document).ready(function()   
    {   
        sortList=$_GET['sortList'];  
        $.tablesorter.defaults.widgets = ['zebra'];   
        $.tablesorter.defaults.sortList = [[1,0]];   
        $("table").tablesorter();   
    }   
);      
</script>

Doesn't work, I think these 2 lines are questionable:
sortList=$_GET['sortList']; ... $_GET['sortList'] = sortList;

I'm mixing here languages JavaScript with PHP and data types. But I'm not a professional programmer and I can't connect the dots. Any help?

Alex

score 8 · Accepted Answer · answered Feb 20 '12 at 01:34

8

I have a fork of the tablesorter plugin on github and I wrote a widget called "saveSort" (demo) which stores the last sort into localStorage if the browser has HTML5 or into a cookie as a fallback.

answered Feb 20 '12 at 01:34

Mottie

84,355
30
126
241

fudgey, thanks a lot! You are the man. Works perfect, as I wanted. Good luck! – user985456 Feb 20 '12 at 14:52
Awesome. I just have to include the your latest tablesorter js and the tablesorter widget js and put `widgets: ["saveSort"]` – Lynnell Neri Mar 01 '17 at 07:58
Current link for the demo is https://mottie.github.io/tablesorter/docs/example-widget-savesort.html – melutovich Jul 08 '22 at 08:43

score 1 · Answer 2 · answered Feb 17 '12 at 19:15

1

try this library jQuery Address to work in a solution using the window.location.hash object. I'm currently using it in a project and works fine.

answered Feb 17 '12 at 19:15

Diego Marafetti

465
3
7

score 0 · Answer 3 · edited May 23 '17 at 12:25

Depending on how you coded the page, some browsers will automatically remember what the last state was. More than likely though, it will not, especially on older browsers.

A basic, cross browser solution is to store the state information in the window.location.hash object. In other words, for any event or state that you want to remember, you change the hash to a unique identifier:

window.location.hash = 'column1'

This adds #clicked-button to the end of your URL. You would want to call this when the user sorts the table. That alone won't do anything though. The second step is to listen for changes to the hash. IE has a onhashchange event but I dont think other browsers support that event. The alternative is to set up an interval to listen manually.

var last_hash = '';
setInterval(function()
{
    if(window.location.hash != last_hash)
    {
        //a new event happened, change the state of the page
        last_hash = window.location.hash;

        if(last_hash == 'column1')
        {
            //sort based on column1
        }
        else if(last_hash == 'column2')
        {
            //sort based on column2
        }
        //etc
    }
}, 500);

A script like this will continue to run even when a user navigates away from the page and then comes back.

You can also read these for more info on other techniques.

jQuery Tablesorter plugin - how to save the state when leaving the page

3 Answers3