Mottie/tablesorter

Initialising filters does not seem to work with AJAX

MrTobyDog opened this issue · 4 comments

MrTobyDog commented

Great plugin which I have used for a while but just started to get more adventurous with pager and filters!

I have looked at http://jsfiddle.net/Mottie/abkNM/785/ and tried to replicate the code:

    $("#child_table").tablesorter({
            theme: 'blue',
            widthFixed: true,
            headers: {7: { filter: false,sorter:false }},
            sortLocaleCompare: true, // needed for accented characters in the data
            sortList: [ [0,1] ],
            widgets: ['zebra', 'filter'],
            widgetOptions : {
//              filter_liveSearch : false,  // force user to press enter to invoke the search
                },
            initialized: function (table) {
                $.tablesorter.setFilters( table, ["a",">0"], true);
                }
            })
        .tablesorterPager(
            {
            container: $("#pager"),
            page: 0,
            size: 25,   // has to match the selected in BS_List_include
//          processAjaxOnInit: false,   // try and stop duplicate load - fails! and also hides the filter fields
            removeRows: false,
            ajaxUrl : 'AJAX_List_Location_Children.php?db_suffix='+db_suffix+'&loc_id='+loc_id+'&page={page}&size={size}&{sortList:col}&{filterList:fcol}',
            ajaxObject: {
                dataType: 'xml'
            },
            ajaxProcessing: function(data){
// lines omitted as not relevant
            },
            output: 'Showing rows {startRow} to {endRow} of {totalRows}',
            });
    }

But it does not seem to work, I am using the pager option with an AJAX call and the AJAX is always called (twice as I have reported in another issue) with no filters, and the filter boxes contain no text. I wondered if filter_liveSearch was the issue but makes no difference whether set or not as far as I can tell.

Mottie commented

Hi @MrTobyDog!

I have already isolated the problem. Basically every time the pager updates, it tries to make sure that a parameter has changed before sending a request out to the server. These checks include, the current page, size, total pages, sort and filters.

The problem was that with empty filters, the value would initially be set to [], but once the filters had initialized, the filters would return a value of ['', '', ''] (for however many columns the table contains). In the comparison of filters, the array is joined by commas currentFilters.join(',') to make sure that the same search in a different column is caught properly. For example:

['Smith', '', ''].join('') === ['', 'Smith', ''].join('');   // true
['Smith', '', ''].join(',') === ['', 'Smith', ''].join(','); // false

so, the pager would compare the empty array versus an array of empty strings and think it was a different search, and allow the second call to go through to the server.

[].join(',') === ['', '', ''].join(',') // false

So, I have fixed this by adding these two lines above the comparison which normalizes the array of empty strings (in both the pager plugin & pager widget):

// fixes issue where one currentFilter is [] and the other is ['','',''],
// making the next if comparison think the filters are different (joined by commas). Fixes #202.
l.currentFilters = (l.currentFilters || []).join('') === '' ? [] : l.currentFilters;
p.currentFilters = (p.currentFilters || []).join('') === '' ? [] : p.currentFilters;
// don't allow rendering multiple times on the same page/size/totalpages/filters/sorts
if ( l.page === p.page && l.size === p.size && l.totalPages === p.totalPages &&
    (l.currentFilters || []).join(',') === (p.currentFilters || []).join(',') &&
    l.sortList === (c.sortList || []).join(',') ) { return; }

I'll have this available in the next update.

MrTobyDog commented

Thanks for quick response - I have patched the code and that seems to have
fixed the "calling ajax twice" issue. But it still does not apply the
initial filters that I set up?

On 4 March 2014 11:44, Rob G notifications@github.com wrote:

Hi @MrTobyDog https://github.com/MrTobyDog!

I have already isolated the problem. Basically every time the pager
updates, it tries to make sure that a parameter has changed before sending
a request out to the server. These checks include, the current page, size,
total pages, sort and filters.

The problem was that with empty filters, the value would initially be set
to [], but once the filters had initialized, the filters would return a
value of ['', '', ''](for however many columns the table contains). In
the comparison of filters, the array is joined by commas
currentFilters.join(',') to make sure that the same search in a different
column is caught properly. For example:

['Smith', '', ''].join('') === ['', 'Smith', ''].join(''); // true['Smith', '', ''].join(',') === ['', 'Smith', ''].join(','); // false

so, the pager would compare the empty array versus an array of empty
strings and think it was a different search, and allow the second call to
go through to the server.

[].join(',') === ['', '', ''].join(',') // false

So, I have fixed this by adding these two lines above the comparison which
normalizes the array of empty strings (in both the pager plugin & pager
widget):

// fixes issue where one currentFilter is [] and the other is ['','',''],// making the next if comparison think the filters are different (joined by commas). Fixes #202.l.currentFilters = (l.currentFilters || []).join('') === '' ? [] : l.currentFilters;p.currentFilters = (p.currentFilters || []).join('') === '' ? [] : p.currentFilters;// don't allow rendering multiple times on the same page/size/totalpages/filters/sortsif ( l.page === p.page && l.size === p.size && l.totalPages === p.totalPages &&
(l.currentFilters || []).join(',') === (p.currentFilters || []).join(',') &&
l.sortList === (c.sortList || []).join(',') ) { return; }

I'll have this available in the next update.

Reply to this email directly or view it on GitHubhttps://github.com//issues/525#issuecomment-36579762
.

Mottie commented

That is yet another thing I broke in version 2.15.0 (see issue #511)... Originally, you would set the data-value of the header cell to set a default filter.

<th data-value=">20">Value</th>

this data-attribute can be modified by the filter_defaultAttrib option setting

This demo will work once the next update is available.

MrTobyDog commented

Thanks

On 4 March 2014 13:22, Rob G notifications@github.com wrote:

That is yet another thing I broke in version 2.15.0 (see issue #511#511)...
Originally, you would set the data-value of the header cell to set a
default filter.

Value

this data-attribute can be modified by the filter_defaultAttrib optionhttp://mottie.github.io/tablesorter/docs/index.html#widget-filter-defaultattribsetting

This demo http://jsfiddle.net/abkNM/2157/ will work once the next
update is available.

Reply to this email directly or view it on GitHubhttps://github.com//issues/525#issuecomment-36585632
.