Filter Widget from tablesorter doesn't work

Question

I'm using Tablesorter (2.22.1) in MVC Razor application and I have a problem with adding basic filter row. I've added scripts (js plugins) in bundle.

bundles.Add(new ScriptBundle("~/bundles/initTableSort").Include(
                "~/Scripts/libs/jquery.tablesorter.js",
                "~/Scripts/libs/jquery.tablesorter.widgets.js",
                "~/Scripts/libs/jquery.tablesorter.combined.js")
);

I also included it in _Layout.html with jquery. I'm not using jquery.latest.js, because in my project are different jquery files (new) and they are added to the _Layout.

@Scripts.Render("~/bundles/jquery")
...
@Scripts.Render("~/bundles/initTableSort")

I have my own css and I don't use Tablesorter themes. My js functions:

$(".tablesorter").tablesorter({
    sortReset: true,
    sortRestart: true,
    widthFixed : true,

    textAttribute: 'data-sort',
    widgets: ["filter"],
    widgetOptions: {
        filter_external: '.search',
        filter_defaultFilter: { 1: '~{query}' },
        filter_columnFilters: true,
        filter_placeholder: { search: 'Search...' },
        filter_saveFilters: true,
        filter_reset: '.reset'
    },
    headers: {
        'th.smallChart, th.errorLink': {
            sorter: false,
            filter: false
        },
        'th.errorDifference': {
            sorter: 'data'
        }
    }

});

Data in table are rendered by foreach loop, but the headers and table has needed classes/ids. I don't paste the table code, because it's too long and I think there's no problem with it how it looks like.

After that sorting, reset sorting (after third click), custom parser works fine, but include Widget 'Filter' gives me only row to write a filter query to every column, but it's not working. I could write something, but table is not filtered after that. I don't know why. Inspect doesn't show any error.

Please, someone could help me with that and write what I'm doing wrong?

EDIT 1

I even create new project with data from this documentation Basic Filter Tablesorter Documentation and i have still the same issue, so I have to something do wrong, but I don't know what and where.

Answer 1

PROBLEM SOLVED

Problem was in .css theme file... I don't link a .css blue theme file, because I use my own css, but there is no info about that you have to add part of .css theme file to use filtering.

You have to only add

/* rows hidden by filtering (needed for child rows) */
.tablesorter .filtered {
    display: none;
}

/* ajax error row */
.tablesorter .tablesorter-errorRow td {
    text-align: center;
    cursor: pointer;
    background-color: #e6bf99;
}

to your .css file and everything goes fine.

Answer 2

It would be helpful if you could provide a demo of the issue

Seeing that you are using a custom parser to get a cell data-attribute, I wanted to share that this is already built-in; set the textAttribute option to match your data-attribute:

$(".tablesorter").tablesorter({
    sortReset: true,
    sortRestart: true,
    textAttribute: 'data-sort',
    widgets: ["filter"],
    widgetOptions: {
        filter_external: '.search',
        filter_defaultFilter: { 1: '~{query}' },
        filter_columnFilters: true,
        filter_placeholder: { search: 'Search...' },
        filter_saveFilters: true,
        filter_reset: '.reset'
    },
    headers: {
        'th.smallChart, th.errorLink': {
            sorter: false
        }
    }
});

Hopefully this change will fix the issues you are having.