saveSort - How do I save my sort (and maybe filter) state through an auto refresh

[activecamo]

I have only been using JavaScript for just over a month so I apologize and thank you in advance for taking the time to read this.

http://mottie.github.io/tablesorter/docs/example-widget-savesort.html

I have been going over the documentation above, I am on TS 2.14 and 2.8 for widgets. Initially what I have seems to partially work. When the page is first loaded I am able to sort and I can manually refresh while keeping the sort order that I have . However when"var timer = setInterval(getBjson, 40000);" runs and refreshes the table I lose the sort order that I had, and I lose the ability to sort columns or use the filters. I think that the reason behind this is my use of set interval, but I have not had any luck with any other method for getting the JSON to auto get, and I don’t think I would know how to fix it if it was.

<script>
        $(function () {
            function getBjson() {
                var url = 'json/board.json';
                $.getJSON(url, function (data) {
                    var output = [];
                    for (var i in data) {
                        output +=
                            '<tr id="' + data[i].severity + '">' +
                            '<td>' + data[i].severity +
                            '</td><td>' + data[i].alert_type +
                            '</td><td>' + data[i].object +
                            '</td><td>' + data[i].message +
                            '</td></tr>';                    
                        };
                    document.getElementById("container").innerHTML = output;

                    $(function () {
                        $("#Btable").tablesorter({
                            widthFixed: true,
                            widgets: ["saveSort", "stickyHeaders", "filter"],
                            widgetOptions: {
                                filter_columnFilters : true,
                                filter_searchDelay: 100,
                                filter_startsWith: false,
                                filter_defaultAttrib : 'data-value'
                            }
                        });

                    });
                })

            }
            var timer = setInterval(getBjson, 40000);
            getBjson();
        });
</script>

The table its dumped to:

    <table class="tablesorter" id="Btable">
        <thead>
            <tr class="filter">
                <th class="filter-select">Severity</th>
                <th class="filter-select">Alarm</th>
                <th>Host</th>
                <th>Message</th>
            </tr>
        </thead>
        <tbody id="container">
            <!-- loop outputs here -->
        </tbody>
    </table>

In the doc for saveSort it is also mentioned that "Sort saving requires the new "$.tablesorter.storage()" function included with the "jquery.tablesorter.widgets.js" file (v2.1).", but tablesorter.storage is only ever mentioned in the notes section and never appears in the the page source of the live example or the Java/HTML reference sections. Is it non needed in your JavaScript?

Finally is it possible to persist both the filter and the sort through a refresh?

[Mottie]

Hi @activecamo!

Try doing it this way:

$(function () {

    $("#Btable").tablesorter({
        widthFixed: true,
        widgets: ["saveSort", "stickyHeaders", "filter"],
        widgetOptions: {
            filter_columnFilters : true,
            filter_searchDelay: 100,
            filter_startsWith: false,
            filter_defaultAttrib : 'data-value'
        }
    });

    function getBjson() {
        var url = 'json/board.json';
        $.getJSON(url, function (data) {
            // ...
            document.getElementById("container").innerHTML = output;
            // update tablesorter cache
            $("#Btable").trigger("update");
        });
    }
    var timer = setInterval(getBjson, 40000);
    getBjson();
});

The difference is that tablesorter is initialized once, outside of the setInterval. Once the table is modified after the ajax call, it only needs to be updated (trigger "update") and not reinitialized.

[activecamo]

Thank you Mottie for such a quick response, I am now able to have table sorter to persist through the refreshes.

However I have found out that I am only able to save my filters through refreshes if I do NOT use the savesort widget. If both save sort and save filters are being used the only one that is saved seems to be savesort. The filters, even the filter-select, are lost in the process.

The last thing that I have ran into is that the table trigger update does not update the table data if filters or save sort are begin used. If that is normal then I can work around it, but I would like to know if this is the case.

Thank you again for your help, my resources are very little and this has been blocking me for a few weeks. once you mentioned the solution above a lot of things clicked in my head and answered several other questions that I was not able to get across to others.

my code is below using 2.15

<script type="text/javascript">

    $(function () {

        $(function(){
          $("#Btable").tablesorter({ 
            widthFixed : true,
            theme : 'default',
            widgets: [ 'savesort', 'stickyHeaders', "filter"],
            widgetOptions : {
                filter_ignoreCase : true,
                filter_liveSearch : true,
                filter_searchDelay : 150,
                filter_saveFilters : true,
            }
            });
      });

        $('button').click(function(){
            $('table').trigger('sortReset');
            return false;
        });

        function getBjson() {
            var url = 'json/board.json';
            $.getJSON(url, function (data) {
                var output = [];
                        for (var i in data) {
                            output +=
                                '<tr id="' + data[i].severity + '">' +
                                '<td>' + data[i].severity +
                                '</td><td>' + data[i].alert_type +
                                '</td><td>' + data[i].object +
                                '</td><td>' + data[i].message +
                                '</td><td> <abbr class="timeago" title="' + data[i].created +
                                '"></abbr></td><td> <abbr class="timeago" title="' + data[i].updated +
                                '"></abbr></td><td>' + data[i].ticket +
                                '</td><td>' + data[i].owner_id +
                                '</td></tr>';                    
                            };
                document.getElementById("container").innerHTML = output;
                // update ttriggers bellow
                $("#Btable").trigger("update");
                jQuery("abbr.timeago").timeago();

            });
        }

        var timer = setInterval(getBjson, 10000);
        getBjson();
    });

</script>

[Mottie]

It seems to work for me... try this demo:

• Click the "Setup" button to select "Aaron" and sort the "Age" column
• Click "Run" to rerun the fiddle
• The saved sort and filter should now be applied.
• Click the "Add" button to add a new row.

[activecamo]

Thank you, after a bit of cleaning up I was able to get it to work. I am finding it strange thought that in the that demo you linked above and in http://mottie.github.io/tablesorter/docs/example-widget-filter-custom.html the filter_defaultAttrib : 'data-value', looks like its being used and setup properly but in the demo table the value is not being applied to the filters. Unless I am misunderstanding its use, <th data-value="<30">Age</th> should set the default value of the column to "<3" and the filtering shoudl only show that which has its value correct?

[Mottie]

Hmm, I think you're right... it looks like when filter_saveFilters is set to true, it allows the saved filters (even if nothing is saved, so it results in an empty string) to override the default filter value. I'll look into fixing this.