Filter + parser

[Geler]

Hi and thanks for this amazing plugin.
First : Sorry english isn't my first language so this may have some mistakes.

I'm using tablesorter for some tables in a CMS, so in some I have input, textarea or select. For the sorter its work great because I made my own parsers like that 1 :

ts.addParser({
    id: 'select',
    is: function(s) {
        return (/<select/).test(s);
    },
    format: function(s, table, cell) {
        return $('select option:selected', cell).html();
    },
    type: 'text'
});

But my problem is : the filter doesn't use the parsers or the cache made with it, the filter look on his own at the td and cut all html he found and keep what's left.

I'm trying since some hours to edit the filter widget to get the cells values from the cache, but looks like this is hard to acces the cache from the widget first, then will need to find the datas in the cache. I'm looking for some help with this. Do you know an easy way to ask the cell values to tablesorter from the widgets.

[Mottie]

Hi Geler!

I think this will take a lot of changes to the plugin and the filter widget, because the filter widget needs to look at the actual table to determine if there are child rows. You can't tell when looking through the cached data. Making any changes to the cached data would also make the widgets incompatible with tablesorter v2.0.5.

Maybe we can figure something else out? How different is the parsed data from the actual data?

[Geler]

Exemple, when in a td I got a select tag, my parser found it and return the .html() of the selected option. So the sorter can sort this row that way.

And I would like the filter to work with this data, so the buildSelect would do a select filter from the selected options, and show only them when we select 1 in the filter.

But now, the buildSelect remove every tags and keep what's left. If my select was this :
Option 1 Option 2 Option 3

Then i'll have 1 option in the select filter and it will be : Option1Option2Option3

[Geler]

But as I see now, this is looking in the cached data to build the Select filter

// get non-normalized cell content
t = c.cache[k].row[j][0].cells[i];
arry.push( c.supportsTextContent ? t.textContent : $(t).text() );

But this is where its returning Option1Option2Option3, this part of the cache isn't build from parsers

[Geler]

So now, trying to edit this
arry.push( c.supportsTextContent ? t.textContent : $(t).text() );

to change t.textContent for parsers[j].format(t, table, c[0].cells[j], j) from buildCache

[Geler]

Got it working for buildSelect, so this look like this now

var o, arry = [];
var tc = table.config,
y,
parsers = tc.parsers;
i = parseInt(i, 10);
o = '<option value="">' + ($(c.headerList[i]).attr('data-placeholder') || '') + '</option>';
for (k = 0; k < b.length; k++ ) {
    l = c.cache[k].row.length;
    // loop through the rows
    for (j = 0; j < l; j++) {
        y = $(b[k].rows[j]);
        // get non-normalized cell content
        t = c.cache[k].row[j][0].cells[i];
        arry.push( c.supportsTextContent ? parsers[i].format(t, table, y[0].cells[i], i) : $(t).text() );
    }
}

I'm working on findRows now

[Geler]

And my findRows now

findRows = function(){
    var tc = table.config,
    y,
    parsers = tc.parsers;
    if (c.debug) { time = new Date(); }
    v = $t.find('thead').eq(0).children('tr').find('select.' + css + ', input.' + css).map(function(){
        return $(this).val() || '';
    }).get();
    cv = v.join('');
    for (k = 0; k < b.length; k++ ) {
        $tb = $(b[k]);
        $tr = $tb.addClass('tablesorter-hidden').children('tr');
        l = $tr.length;
        // loop through the rows
        for (j = 0; j < l; j++) {
            // skip child rows
            if (reg1.test($tr[j].className)) { continue; }
            if (cv === '') {
                $tr[j].style.display = '';
            } else {
                r = true;
                cr = $tr.eq(j).nextUntil('tr:not(.' + c.cssChildRow + ')');
                // so, if "table.config.widgetOptions.filter_childRows" is true and there is
                // a match anywhere in the child row, then it will make the row visible
                // checked here so the option can be changed dynamically
                y = $(b[k].rows[j]);
                t = (cr.length && (wo && wo.hasOwnProperty('filter_childRows') &&
                    typeof wo.filter_childRows !== 'undefined' ? wo.filter_childRows : true)) ? cr.text() : '';
                $td = $tr.eq(j).children('td');
                for (i = 0; i < cols; i++) {
                    x = $.trim(parsers[i].format(t, table, y[0].cells[i], i));

That way the filters work with parsers, I dont know if this still work with child rows, I know there will be no child rows in my table. So for my case, this work perfect.

[Mottie]

Thanks for sharing your code! I'll look into adding your code with an option that lets you choose where to get the data from... or something.

Thanks! :)

[Geler]

Awesome! But now I got another bug, I don't know yet if its from my code or if it was like that before, I'll dig more into it next week when i'll get back to work but, I have the pager on, when I use the filter its looking only in content of the current page, when I put back the filter to nothing : everything from the current page come back and its the only page left.

PS : thanks for formating my comments and again realy great work to keep tablesorter alive and to every update you did on it!

[Mottie]

Set the pager plugin option removeRows to false. This hides table rows instead of removing them from the table completely. The biggest issue is that the pager plugin won't kick in and page the filtered results.

Eventually, I plan on rewriting the pager plugin to cooperate with widgets and stuff.

[Geler]

Ah thanks, this is perfect with removeRows false!

[thezoggy]

maybe work on a build script so we can include the widgets we want? tablesorter core and plugins have grown quite a bit....

[Mottie]

@thezoggy I would if I knew how.... I'd add unit testing too, if I knew how LOL.

Anyway, in the next update I plan on changing the filter widget in the widgets.js file to be more basic, then put a more advanced filter widget into a separate file. I'm still working out the bugs in the quick search, and hopefully I'll have that available soon.

[Geler]

Awesome, because my build still have troubles with pager, after filtering we see more rows than current page should show. I still trying to find how I can call pager to update after filter.

[thezoggy]

@Mottie well then maybe I'll come up with something for ya :) I'll wait for your next update before I do anything though.. and i'll create a new issue # to take that discussion over there.

[Mottie]

Added a filter_useParsedData option in version 2.4. See how to use it to apply to the entire table, or use filter-parsed to target specific columns.