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.

Pondicherry

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.

Pondicherry

This fixed my issue too, but after the filter, the zebra striped rows get screwed up. – Fadil

saved my time!! thanks a lot!! (i spent so many hours prior reading this post to implement filter) – Induna

Why oh why! Now I don't feel so bad about being really confused. – Augustinaaugustine

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.

Alecto

Thanks for the answer, my code is now shorter, but still a have filter issue. – Pondicherry

I also add screen of the issue – Pondicherry

Here's a demo: jsfiddle.net/0cd7h0ds ....works fine, until you remove the them.blue.css , then filtering no longer works – Augustinaaugustine

When using a custom theme, make sure to include this css: .filtered { display: none; } – Alecto