Skip to main content
Tweeted twitter.com/#!/StackCodeReview/status/387778832822206464
added 2 characters in body
Source Link

This plugin is meant to filter through a table based on column header text that matches options given to it. check it out here: Filter Table PluginFilter Table Plugin

This plugin is meant to filter through a table based on column header text that matches options given to it. check it out here: Filter Table Plugin

This plugin is meant to filter through a table based on column header text that matches options given to it. check it out here: Filter Table Plugin

Source Link

What improvements can I make to this table filtering jQuery Plugin?

This plugin is meant to filter through a table based on column header text that matches options given to it. check it out here: Filter Table Plugin

Plugin code below for reference:

//framework from http://jqueryboilerplate.com/
; (function ($, window, document, undefined) {

    var pluginName = "filterTable",
        defaults = {
        };
    function Plugin(element, options) {
        this.element = element;

        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype = {

        init: function () {

            $el = $(this.element);
            $table = $('#' + $el.data('filtertable'));
            var filterColumnNames = ($el.attr('data-filtercolumns')).split(',');
            var filterColumns = new Array();
            var altRowCSS = $el.data('filteralternatingcss');

            //get the column index of the column we'll be filtering on
            $table.find('th').each(function (i) {
                for (j in filterColumnNames) {
                    if ($(this).text().trim() == filterColumnNames[j]) {
                        filterColumns.push(i + 1);
                    }
                }
            });

            $el.keyup(function () {
                var query = $(this).val();
                var numDisplayed = 0;
                //remove any no result warnings
                $table.find('#noResultsRow').remove();
                //hide all rows
                $table.find('tr').removeClass(altRowCSS).hide();
                //show the header row
                $table.find('tr:first').show();
                for (i in filterColumns) {
                    $table.find('tr td:nth-child(' + filterColumns[i] + ')').each(function () {
                        if ($(this).text().toLowerCase().indexOf(query.toLowerCase()) >= 0) {
                            $(this).parent().show();
                            numDisplayed++;
                        }
                    });
                }
                if (numDisplayed == 0) {
                    $tr = $('<tr>');
                    $tr.attr('id', 'noResultsRow');
                    $td = $('<td>').attr('colspan', $table.children('tbody').children('tr').children('td').length);
                    $td.html('No results for filter "' + query + '."');
                    $td.css({ textAlign: 'center' });
                    $tr.append($td);
                    $table.children('tbody').append($tr);
                }
                $table.find('tr:visible :odd').addClass(altRowCSS);
            });
            $el.keyup();
        },
    };

    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
    };

})(jQuery, window, document);

Any improvements I can make?