Search code examples
javascriptjquerytablesorter

In Tablesorter, setting different values to the dropdown options of a column filter


I'm using Tablesorter to display a table and I have a column with a dropdown filter with several options. Something like this:

widgetOptions : {
    filter_functions: {
        4: {
            users_all : function() {},
            users_collaborators : function() {},
            users_clients : function() {}
        }
    }
}

All those three values (users_all, users_collaborators and users_clients) are variables but they're being displayed as strings.

Is there any way to display the variables' content?

UPDATE 1

What I'm trying to do is to display the options in one language or another (nothing to do with the table).

I've tried changing the select options through filter_selectSource like this:

widgetOptions: {
    filter_selectSource: {
        4 : [ 'Client', 'Collaborator' ]
    },
    filter_functions: {
        4 : true
    }
} 

But it throws an error (Cannot read property 'format' of undefined) on jquery.tablesorter.widgets.js:1464

I'm populating the table through ajaxProcessing and I'm picking this filter just like any other:

ajaxUrl: '/users/table_users.php?page={page}&size={size}&{sortList:sort}&{filterList:filter}'

I tried setting up your demo myself and had no problem at all.

ONCE RESOLVED IT LOOKS LIKE:

widgetOptions : {
    filter_functions: {
        4: true
    },
    filter_selectSource: {
        4 : [ user_all, user_collaborators, user_clients ]
    }
}

And I've added the class filter-select-nosort to the header of that column in the table.


Solution

  • What exactly are you trying to do with the filter select?

    You can change the select options using the filter_selectSource option (demo)

    $(function () {
        $('table').tablesorter({
            theme: 'blue',
            widgets: ['zebra', 'filter'],
            widgetOptions: {
                filter_selectSource: {
                    1 : [ 'Client', 'Collaborator' ]
                }
            }
        });
    });