Search code examples
filterexternaltablesorter

tablesorter external input filter applied to two columns and starts with input value


I'm learning table sorter and trying to make a filter external input. It filters two columns (name and surname). The filter must search for strings that begin with the input text field content. They work separately.

Apparently, is not possible to filter more than two columns with filter_startsWith : true. It returns an empty set if I put them together.

HTML:

<input type="text" id="search" data-column="1,2" type="search"/>

Script:

var tableSorterOptions = 
        {   
            widgets: ["filter","pager"],
            widgetOptions : 
            {
                filter_columnFilters: false,
                filter_external : '#search',
                filter_startsWith : true                    
            },
            debug: true
        };

        $(document).ready(function() 
        {       
            $('#tabla')         
                .tablesorter(tableSorterOptions);           
        });

I've tried removing filter_startsWith : true with:

        filter_defaultFilter :
        {
            1: '/^{q}/',
            2: '/^{q}/'
        },

in the widgetOptions for it to search name and surname (1 & 2) from the beginning of the string (/^{q}/) but it does not work.

Could you give some tip.

Thanks a lot


Solution

  • It looks like there was a bug causing a javascript error. I just fixed it and push out a new version (v2.23.0). Here is a demo using this code:

    /* Documentation for this tablesorter FORK can be found at
    * http://mottie.github.io/tablesorter/docs/
    */
    $(function () {
        $('table').tablesorter({
            theme: 'blue',
            widgets: ['zebra', 'filter'],
            widgetOptions: {
                filter_columnFilters: false,
                filter_startsWith: true,
                filter_external : '#search',
                filter_defaultFilter: {
                    // 7 = "any" match filter index (total table columns + 1)
                    7 : '{q1} or {q2}'
                }
            }
        });
    });