quicksearch stripe functionality breaks when incorporated with jquery.tablesorter

[jackbeanstalk50]

First and foremost, Great job and thank you for creating this plugin!

This is actually more of an FYI than an issue...

When creating reports that are shown through html tables, it is nice to incorporate a couple of plugins that would provide customers more options to see what they really need. However, every time we try to execute the integration of different features, it is very much likely that we encounter dependency/function conflict problems. This now boils down to the issue i encountered when i integrated tablesorter with quicksearch...

Problem: Here is the process i executed that made me come across the problem.

1. i utilized the tablesorter plugin and used the 'zebra' widget to manage the row striping. This works well, as expected.
2. i applied the quicksearch plugin and used the stripeRows: ['oddRow', 'evenRow'] to manage the striping when search operation is being done. This works well when no sorting is implemented on any column of the table. However, when a sort is enforced on any column of the table, it messes up the striping. *\ The cause of this problem is mainly because of the table caching wherein the old structure of the table is being used instead of the actual table view that is displayed in the page.

Solution: After encountering the problem i looked into the quicksearch code to understand it's behavior and come up with a one-liner fix that is shown below.

    this.stripe = function () {
        if (typeof options.stripeRows === "object" && options.stripeRows !== null)
        {
            var joined = options.stripeRows.join(' ');
            var stripeRows_length = options.stripeRows.length;

            jq_results = $(target); // Add this line to update the table structure/chronological order of the sorted table.
            jq_results.not(':hidden').each(function (i) {
                $(this).removeClass(joined).addClass(options.stripeRows[i % stripeRows_length]);
            });
        }

        return this;
    };

I haven't looked into the downside of this change yet (overhead in performance, etc.), but i guess it is safe to say that the right behavior is achieved.

Best regards,

• Jack

[riklomas]

Thanks Jack, really appreciate the fix, I'll implement it as soon as I get chance!

[jackbeanstalk50]

Glad to help out and contribute Rik. Thanks!

[Johennes]

Rik, as I can see you haven't implemented this yet, and I think you have a good reason not do so. By default, the Quicksearch plugin shouldn't assume that the underlying data has changed between successive calls to stripe(), because rebuilding the cache on every search update might be a very expensive operation in terms of performance and it's totally pointless for the case of a static table. The solution to Jack's problem (I also ran into the same issue by the way) is to add a widget to the Tablesorter plugin, that rebuilds the cache after every sort operation.

// Initialize quicksearch
qs = $('input').quicksearch('table tbody tr', {
    'stripeRows': ['odd', 'even']
});

// Define quicksearch re-caching widget
$.tablesorter.addWidget({
    id: 'quicksearch-cache',
    format: function(table) {
        qs.cache(); // Neccessary to make the striping work
    }
});

// Setup table sorting
$('table').tablesorter({
    widgets: ['zebra', 'quicksearch-cache']
});

This might involving some more lines of code than Jack's approach, but in return it doesn't involve hacking plugin code.