Columns filtering API

[Rastishka]

Thank you for GREAT jquery plugin!!!

I need to filter a wide table only by 2 columns, so using filter widget is too bulky. It would be great to have an ability to hide filter widget, and call like

$("#table1").filter({0: function(e, n, f, i) { return n >= 10 && n <=100; }, 3: function(e, n, f, i) { return n < 10; }, method: "OR" });

so it will filter 1st and 4th column using the functions, and the "method" option tells to use OR or AND rule between the column filters.

Arent you planning to implement similar features?

PS sorry for crapy english. =(

[Mottie]

Hi some0ne!

Well, I'd have to figure out how to modify the filter widget to switch between "AND" and "OR" between columns or assign specific combinations. That's a bit more complicated. In the example you shared, it would only allow using "OR" for all functions. I think it might be better to be able to select.... maybe add a variable with something like:

filter_combos : "0 OR 3, 1 AND 2 AND 4"

That's not ideal, I'll keep thinking about how to do it and get back to you.

But in the mean time, you can hide the filter inputs using css:

table.tablesorter tr.tablesorter-filter {
    display: none;
}

And control the selected filter option externally (demo):

$('table').tablesorter({

    // include zebra and any other widgets, options:
    // 'columns', 'filter', 'stickyHeaders' & 'resizable'
    // 'uitheme' is another widget, but requires loading
    // a different skin and a jQuery UI theme.
    widgets: ['zebra', 'filter'],

    widgetOptions: {

        // Add select box to 4th column (zero-based index) 
        // each option has an associated function that returns a boolean 
        // function variables: 
        // e = exact text from cell 
        // n = normalized value returned by the column parser 
        // f = search filter input value 
        // i = column index 
        filter_functions: {
            // Add these options to the select dropdown (numerical comparison example) 
            4: {
                "< $10": function(e, n, f, i) {
                    return n < 10;
                },
                "$10 - $100": function(e, n, f, i) {
                    return n >= 10 && n <= 100;
                },
                "> $100": function(e, n, f, i) {
                    return n > 100;
                }
            }
        }
    },

    initialized: function(table) {
        // target select
        var i, select = $(table).find('select.tablesorter-filter');
        $('button').click(function() {
            i = $(this).data('index');
            select[0].options[i].selected = true;
            // make sure the filter widget knows we changed it
            select.trigger('change');
        });
    }

});​

I know this isn't exactly what you were looking for, but it's a start.... now to figure out how to incorporate using "OR" and "AND".

[Mottie]

I just discovered this plugin named PicNet Table Filter and I think I like their idea of adding a separate "overall" search input above the table where you can enter your search parameters. That plugin can use "OR" and "AND" functions (ref)

So I could make that extra input work with something like Johnson AND 2009 or "< $10" OR "> $100" which can then use the filter functions... how does that sound to you?

[Rastishka]

And control the selected filter option externally (demo):

Yes, i've already coded it the same way. I handle onchange event on external SELECT and change the hidden table-sorter SELECT.

I just discovered this plugin named PicNet Table Filter and I think I like their idea of adding a separate "overall" search
input above the table where you can enter your search parameters. That plugin can use "OR" and "AND" functions (ref)

Before using your component, I was using the original tableSorter with tablesorter.pager() and tablesorter.filter() plugins. I cannot find a working example.

I think that overall filter will be enough. I think it should be called like:

$("#clientsListTable").tablesorter({widgets: ["quicksearch"],
             headers: { 0: {filter: false, quicksearch: true },
                     2: { filter: false, quicksearch: true}},
                     widgetOptions : { 
                              filter_quicksearchInput: "input#quicksearch" /*external input field */
                             } 
                        } 
                 });

But the possibility to apply filters without hiding and changing hidden SELECT is also needed.

filter_combos : "0 OR 3, 1 AND 2 AND 4"

I think its too complex and nobody will really use it.
Searching using AND or OR rules is a good idea, I like it!!! But it is also too complex I think...
Or not????

[Mottie]

Hmm, I don't think that my version of the filter widget will work very well with the pager plugin. It doesn't search the cache, but instead searches the actual table contents. I'll have to take a look at the filter plugin and see how he did it.

[Rastishka]

It doesn't search the cache, but instead searches the actual table contents.

By the way, I had an idea of speeding up the search and filtering by using HTML5 Web SQL Database.
When the table is initialized all the cells are put in a temporary client-side web database, and all the search and filtering is made by SQL requests to this DB. http://playground.html5rocks.com/#async_transactions

At the moment it is supported by the most modern browsers:
http://www.html5rocks.com/en/features/storage

I am sure it could strongly speedup big tables, because data is managed by compiled code (sqlite.dll), but not JS.