Remembering Filtered data

[webmatrix]

Hello,

I want to save/remember last filter data unless and until filter is reset using reset button.It should remember even after page refresh or coming back after visiting the page.

Any pointers to this kind of functionality will be helpful.

Regards,
Abhijit

[Mottie]

Hi webmatrix!

You can use the filter events (filterInit and filterEnd) added in version 2.4. Here's a demo and the necessary code:

$('table')
    .bind('filterInit', function() {
        // check that storage ulility is loaded
        if ($.tablesorter.storage) {
            // get saved filters
            var f = $.tablesorter.storage(this, 'tablesorter-filters') || [];
            $(this).trigger('search', [f]);
        }
    })
    .bind('filterEnd', function(){
        if ($.tablesorter.storage) {
            // save current filters
            var f = $(this).find('.tablesorter-filter').map(function(){
                return $(this).val() || '';
            }).get();
            $.tablesorter.storage(this, 'tablesorter-filters', f);
        }
    });

If you also need to save the sort, then include the saveSort widget.

[webmatrix]

Hi Mottie,

Worked like charm.

Yes. I have already included saveSort widget.

Thanks for wonderful plugin and widgets.Helped a lot in our Project.

Some suggestions for Version 3.

Somebody has already suggested it for Calculating Footer totals. Just I want suggest " Footer Totals working with Filters"

Regards,
Abhijit

[drlovegrove]

Hi Mottie,

Firstly, a big thumbs up for your work on tablesorter !

I'm having some problems with saving filter text and was wondering if you had any suggestions.

Prior to the changes you made on 17th Feb, the code you posted above worked a charm. I've got an aspx page which does auto-updates, and with the two binds you listed above, the filters would re-apply themselves to the updated table.

After the changes made on the 17th though, it doesnt seem to work at all.
I think you added filter_formatter to the filter widget, and looking at a diff, quite a few other changes.

From what I can work out, something's changed in the order of filterinit and filterend triggers. I'm not that great with javascript though, so that's kind of where my workaround attempts end.

Any ideas ?

Thanks,
DrLovegrove

[Mottie]

Hi @drlovegrove!

Sorry I've been extremely busy, I'll look into this soon.

[Mottie]

Hi @drlovegrove!

It appears that all the filter events are working as they should.

And just to make sure we are on the same page, the events occur as follows:

• filterInit is only triggered once, after the filter widget has completed it's setup.
• filterStart is triggered when the filtering widget starts its search through the rows.
• filterEnd is triggered when everything is done.

I didn't test these events while using a filter_formatter, is that the problem?

[drlovegrove]

Hi Mottie,

Thanks for the replies.. Sadly, I'm not using filter_formatter, in fact, I've stripped the whole thing back to use just the filter widget with all defaults..

Ok, I've added some logging to my JS, as follows:

console.log("PanelLoad");

// Restore the filter state - only works with old filter widget
$(".Grid").bind('filterInit', function() {
    console.log("filterInit: triggered");
    // check that storage utility is loaded
    if ($.tablesorter.storage) {
        // get saved filters
        console.log("filterInit: applying old filter");
        var f = $.tablesorter.storage(this, 'tablesorter-filters') || [];
        $(this).trigger('search', [f]);
        console.log("filterInit: applied old filter");
    }
});

// Save the filter state - only works with old filter widget
$(".Grid").bind('filterEnd', function () {
    console.log("filterEnd: triggered");
    if ($.tablesorter.storage) {
        // save current filters
        console.log("filterEnd: saving current filter");
        var f = $(this).find('.tablesorter-filter').map(function () {
            return $(this).val() || '';
        }).get();
        $.tablesorter.storage(this, 'tablesorter-filters', f);
        console.log("filterEnd: saved current filter");
    }
});

$(".Grid").tablesorter(
{
    widgets: ["filter"],
    // no fancy stuff
    widgetOptions: {
    // no fancy stuff
    }
}

---

When running the page, both the working and latest filter widget produce this on a refresh with nothing in the filters:

PanelLoad 
filterInit: triggered 
filterInit: applying old filter 
filterInit: applied old filter 

Also, typing with both gives this:

filterEnd: triggered 
filterEnd: saving current filter 
filterEnd: saved current filter 

But a refresh after the filters contain text differs, and this is the problem.

In the new filter, the end result is all cleared filters:

PanelLoad 
filterInit: triggered 
filterInit: applying old filter 
filterEnd: triggered 
filterEnd: saving current filter 
filterEnd: saved current filter 
filterInit: applied old filter 
filterEnd: triggered 
filterEnd: saving current filter 
filterEnd: saved current filter 

In the old filter, the end result is the old filter text:

PanelLoad 
filterInit: triggered 
filterInit: applying old filter 
filterEnd: triggered 
filterEnd: saving current filter 
filterEnd: saved current filter 
filterInit: applied old filter 

So the new filter widget triggers filterEnd twice, and presumably the 2nd time it saves empty text to the store, or something.

Would triggering the search cause the second filterEnd to trigger, or something like that ?

[Mottie]

Ah, ok I see the problem now.

When a search is triggered ($('table').trigger('search', [f]), it doesn't update the filter values. This was initially done because, well I don't remember LOL, but I think it was because the filter_columnFilters option could be set to false and no filter row would be built.

In the last update, I added two new widget functions, $.tablesorter.getFilters() and $.tablesorter.setFilters(). If I update the demo with these functions, it works perfectly:

$('table')
    .bind('filterInit', function () {
        // check that storage utility is loaded
        if ($.tablesorter.storage) {
            // get saved filters
            var f = $.tablesorter.storage( this, 'tablesorter-filters' ) || [];
            $.tablesorter.setFilters( this, f, true );
        }
    })
    .bind('filterEnd', function () {
        if ($.tablesorter.storage) {
            // save current filters
            var f = $.tablesorter.getFilters( this );
            $.tablesorter.storage( this, 'tablesorter-filters', f );
        }
    });

Here is the same demo with the console logs included.

I'm still not sure why the filterInit event is triggered more than once - which is the actual problem, it should only fire off once, after the widget has initialized - I'll have to look into that.

[Mottie]

Ahh, ok the triggered search "should" have updated the filter inputs, but it was a bug I didn't catch until now... it'll be fixed in the next update and the original code should start working properly as well.