Question

我正在尝试在同一列中进行多重搜索。例如，如果我有一个颜色列并且我搜索：“red，yell”，则tablesorter应显示所有红色和黄色行。我一直在寻找它，我已经尝试重用代码来创建我自己的搜索器，但是获得了任何结果。任何帮助，将不胜感激。非常感谢。

我正在使用Jquery 1.8.30和jquery UI 1.9

<script src="~/Content/tablesorter-master/js/jquery.tablesorter.js" type="text/javascript"></script>

<script src="~/Content/tablesorter-master/js/jquery.tablesorter.combined.js" type="text/javascript"></script>

<script src="~/Content/tablesorter-master/js/jquery.tablesorter.widgets.js" type="text/javascript"></script>

<script src="~/Content/tablesorter-master/js/widgets/widget-columnSelector.js" type="text/javascript"></script>

<script src="~/Content/tablesorter-master/js/widgets/widget-filter.js" type="text/javascript"></script>

<script src="~/Content/tablesorter-master/js/widgets/widget-headerTitles.js" type="text/javascript"></script>

<script src="~/Content/tablesorter-master/js/widgets/widget-output.js" type="text/javascript"></script>

<script src="~/Content/tablesorter-master/js/widgets/widget-reorder.js" type="text/javascript"></script>

<script src="~/Content/jquery-ui-daterangepicker-0.4.3/jquery.comiseo.daterangepicker.js" type="text/javascript"></script>

<script src="~/Scripts/moment.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

    $(function () {

        $("#multiPicker").daterangepicker({
            datepickerOptions: {
                numberOfMonths: 2,
                initialText: '@ViewData("SelectPeriod")'
            }
        });

        // these default equivalents were obtained from a table of equivalents
        // provided by sugar.js sorting alogrithms: http://sugarjs.com/sorting
        $.tablesorter.characterEquivalents = {
            'a': '\u00e1\u00e0\u00e2\u00e3\u00e4\u0105\u00e5', // áàâãäaå
            'A': '\u00c1\u00c0\u00c2\u00c3\u00c4\u0104\u00c5', // ÁÀÂÃÄAÅ
            'c': '\u00e7\u0107\u010d', // çcc
            'C': '\u00c7\u0106\u010c', // ÇCC
            'e': '\u00e9\u00e8\u00ea\u00eb\u011b\u0119', // éèêëee
            'E': '\u00c9\u00c8\u00ca\u00cb\u011a\u0118', // ÉÈÊËEE
            'i': '\u00ed\u00ec\u0130\u00ee\u00ef\u0131', // íìIîïi
            'I': '\u00cd\u00cc\u0130\u00ce\u00cf', // ÍÌIÎÏ
            'o': '\u00f3\u00f2\u00f4\u00f5\u00f6\u014d', // óòôõöo
            'O': '\u00d3\u00d2\u00d4\u00d5\u00d6\u014c', // ÓÒÔÕÖO
            'ss': '\u00df', // ß (s sharp)
            'SS': '\u1e9e', // ? (Capital sharp s)
            'u': '\u00fa\u00f9\u00fb\u00fc\u016f', // úùûüu
            'U': '\u00da\u00d9\u00db\u00dc\u016e' // ÚÙÛÜU
        };

        // modify the above defaults as follows
        $.extend($.tablesorter.characterEquivalents, {
            "ae": "\u00e6", // expanding characters æ Æ
            "AE": "\u00c6",
            "oe": "\u00f6\u0153", // œ Œ
            "OE": "\u00d6\u0152",
            "d": "\u00f0",  // Eth (ð Ð)
            "D": "\u00d0",
            "o": "\u00f3\u00f2\u00f4\u00f5", // remove ö because it's in the oe now
            "O": "\u00d3\u00d2\u00d4\u00d5"  // remove Ö because it's in the OE now
        });

        // overflow table
        $('.wrapperOverflow table').tablesorter({
            debug: true, //Firebug (console) needed --> /docs/example-option-debug.html
            //showProcessing: true, //has bugs --> /docs/example-option-show-processing.html
            sortMultiSortKey: 'altKey', //Click to sort any column header, then hold down the alt key and select a second column. Continue selecting columns as desired.
            widthFixed: true,
            widgets: ['filter', 'reorder', 'columnSelector'],
            widgetOptions: {
                sortList: [[3, 1]], //[[column, asc(0)/desc(1)]]
                widgets: ['filter', 'reorder', 'resizable'],
                ignoreCase: true, // if false, upper case sorts BEFORE lower case
                filter_columnFilters: true,
                filter_liveSearch: true,
                filter_saveFilters: true,
                filter_filteredRow: 'filtered',
                filter_functions: true,
                reorder_axis: 'xy', // 'x' or 'xy'
                reorder_delay: 100,
                reorder_helperClass: 'tablesorter-reorder-helper',
                reorder_helperBar: 'tablesorter-reorder-helper-bar',
                columnSelector_container: $('#columnSelector'),
                columnSelector_columns: {},
                columnSelector_saveColumns: true,
                columnSelector_layout: '<label><input type="checkbox">{name}</label>',
                columnSelector_name: 'data-selector-name',
                columnSelector_mediaquery: true,
                columnSelector_mediaqueryName: '@ViewData("Auto")' + ': ',
                columnSelector_mediaqueryState: true,
                columnSelector_priority: 'data-priority',
                columnSelector_cssChecked: 'checked'
            }
        });

        //http://stackoverflow.com/questions/247305/using-jquery-tablesorter-on-dynamically-modified-table
        $('.wrapperOverflow table').trigger("update");
        $('.wrapperOverflow table').trigger("appendCache");

        //Filters style
        $(".tablesorter-filter").addClass("searchStyle");

        //Reset button
        $('#butReset').click(function () {

            var thereIsSearch = false

            $(".searchStyle").each(function () {
                $('input[type=search]').val('');
                thereIsSearch = true
            });

            if (thereIsSearch == true) {
                var e = jQuery.Event("keypress");
                e.which = 13; //choose the one you want
                e.keyCode = 13;
                $('.searchStyle').trigger(e);
            }
        });

    });

</script>

Answer 1

如果您使用我的fork of tablesorter，那么filter widget将接受＆＃34;或＆＃34;使用竖线|或单词＆＃34;或＆＃34;进行搜索被空格or包围。 Here is an example：

$.tablesorter.setFilters( $('table'), ['', 'Aaron|Peter' ], true );

或

$.tablesorter.setFilters( $('table'), ['', '', 'Hood or Parker' ], true );

Tablesorter，在同一列中进行多次搜索

1 个答案: