Tablesorter过滤器插件+过滤器小部件：过滤/搜索当前未显示的结果

Posted 2023-05-09

【中文标题】Tablesorter过滤器插件+过滤器小部件：过滤/搜索当前未显示的结果

【英文标题】：Tablesorter filter plugin + filter widget: Filtering/searching results that are not currently displayed

【发布时间】：2014-08-11 09:07:00

【问题描述】：

编辑：事实证明，我的寻呼机 js 文件已过时 - 它不包含在可下载的 tablesorter zip 文件中，显然我发现并使用了一个相当旧的版本。

我正在尝试使用我自己的表重新创建在this example 中找到的表。目前，除了我自己的表格所需的单个核心功能之外，我正处于寻呼机正在工作并且过滤器也在工作的阶段。此功能是过滤当前未显示的单个记录的能力。例如，在 Mottie 的链接示例中，您可以过滤“25”上的名称列，它会显示带有 Student25 的单行 - 即使您之前只显示前 10 个结果。对于我的表格过滤来说，过滤所有行/记录是至关重要的，即使我当时只显示了它们的一小部分。 即使我显示的特定数量的记录当前不包含我正在寻找的行/记录，我如何过滤所有行/记录，例如 Mottie 的示例?

我的 JQuery 代码：

$(document).ready(function()  


// **********************************
//  Description of ALL pager options
// **********************************
var pagerOptions = 

    // target the pager markup - see the html block below
    container: $(".pager"),

    // use this url format "http:/mydatabase.com?page=page&size=size&sortList:col"
    ajaxUrl: null,

    // modify the url after all processing has been applied
    customAjaxUrl: function(table, url)  return url; ,

    // process ajax so that the data object is returned along with the total number of rows
    // example:  "data" : [ "ID": 1, "Name": "Foo", "Last": "Bar" ], "total_rows" : 100 
    ajaxProcessing: function(ajax)
        if (ajax && ajax.hasOwnProperty('data')) 
            // return [ "data", "total_rows" ];
            return [ ajax.total_rows, ajax.data ];
        
    ,

    // output string - default is 'page/totalPages'
    // possible variables: page, totalPages, filteredPages, startRow, endRow, filteredRows and totalRows
    output: 'startRow - endRow / filteredRows (totalRows)',

    // apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
    updateArrows: true,

    // starting page of the pager (zero based index)
    page: 0,

    // Number of visible rows - default is 10
    size: 10,

    // Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
    savePages : true,

    //defines custom storage key
    storageKey:'tablesorter-pager',

    // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
    // table row set to a height to compensate; default is false
    fixedHeight: true,

    // remove rows from the table to speed up the sort of large tables.
    // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
    removeRows: false,

    // css class names of pager arrows
    cssNext: '.next', // next page arrow
    cssPrev: '.prev', // previous page arrow
    cssFirst: '.first', // go to first page arrow
    cssLast: '.last', // go to last page arrow
    cssGoto: '.gotoPage', // select dropdown to allow choosing a page

    cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
    cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option

    // class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
    cssDisabled: 'disabled', // Note there is no period "." in front of this class name
    cssErrorRow: 'tablesorter-errorRow' // ajax error information row
;

$("table")
            .bind('filterInit', function() 
            // check that storage ulility is loaded
            if ($.tablesorter.storage) 
                // get saved filters
                var f = $.tablesorter.storage(this, 'tablesorter-filters') || [];
                $(this).trigger('search', [f]);
            
            )
            .bind('filterEnd', function()
                if ($.tablesorter.storage) 
                    // save current filters
                    var f = $(this).find('.tablesorter-filter').map(function()
                        return $(this).val() || '';
                    ).get();
                    $.tablesorter.storage(this, 'tablesorter-filters', f);
                
            )

    // Initialize tablesorter
    // ***********************
    .tablesorter(
        theme: 'blue',
                    headerTemplate : 'content icon', // new in v2.7. Needed to add the bootstrap icon!
        widthFixed: true,
        widgets: ['zebra', 'filter'],
                    widgetOptions: 

                        // zebra widget: adding zebra striping, using content and
                        // default styles - the ui css removes the background
                        // from default even and odd class names included for this
                        // demo to allow switching themes
                        // [ "even", "odd" ]
                        zebra: [
                            "ui-widget-content even",
                            "ui-state-default odd"
                            ],

                        // uitheme widget: * Updated! in tablesorter v2.4 **
                        // Instead of the array of icon class names, this option now
                        // contains the name of the theme. Currently jQuery UI ("jui")
                        // and Bootstrap ("bootstrap") themes are supported. To modify
                        // the class names used, extend from the themes variable
                        // look for the "$.extend($.tablesorter.themes.jui" code below
                        uitheme: 'jui',

                        // columns widget: change the default column class names
                        // primary is the 1st column sorted, secondary is the 2nd, etc
                        columns: [
                            "primary",
                            "secondary",
                            "tertiary"
                            ],

                        // columns widget: If true, the class names from the columns
                        // option will also be added to the table tfoot.
                        columns_tfoot: true,

                        // columns widget: If true, the class names from the columns
                        // option will also be added to the table thead.
                        columns_thead: true,

                        // filter widget: If there are child rows in the table (rows with
                        // class name from "cssChildRow" option) and this option is true
                        // and a match is found anywhere in the child row, then it will make
                        // that row visible; default is false
                        filter_childRows: false,

                        // filter widget: If true, a filter will be added to the top of
                        // each table column.
                        filter_columnFilters: true,

                        // filter widget: css class applied to the table row containing the
                        // filters & the inputs within that row
                        filter_cssFilter: "tablesorter-filter",

                        // filter widget: Customize the filter widget by adding a select
                        // dropdown with content, custom options or custom filter functions
                        // see http://goo.gl/HQQLW for more details
                        filter_functions: null,

                        // filter widget: Set this option to true to hide the filter row
                        // initially. The rows is revealed by hovering over the filter
                        // row or giving any filter input/select focus.
                        filter_hideFilters: false,

                        // filter widget: Set this option to false to keep the searches
                        // case sensitive
                        filter_ignoreCase: true,

                        // filter widget: jQuery selector string of an element used to
                        // reset the filters. 
                        filter_reset: ".reset",

                        // Delay in milliseconds before the filter widget starts searching;
                        // This option prevents searching for every character while typing
                        // and should make searching large tables faster.
                        filter_searchDelay: 300,

                        // filter widget: Set this option to true to use the filter to find
                        // text from the start of the column. So typing in "a" will find
                        // "albert" but not "frank", both have a's; default is false
                        filter_startsWith: false,

                        // filter widget: If true, ALL filter searches will only use parsed
                        // data. To only use parsed data in specific columns, set this option
                        // to false and add class name "filter-parsed" to the header
                        filter_useParsedData: false,

                        // Resizable widget: If this option is set to false, resized column
                        // widths will not be saved. Previous saved values will be restored
                        // on page reload
                        resizable: true,

                        // saveSort widget: If this option is set to false, new sorts will
                        // not be saved. Any previous saved sort will be restored on page
                        // reload.
                        saveSort: true,

                        // stickyHeaders widget: css class name applied to the sticky header
                        stickyHeaders: "tablesorter-stickyHeader"

                    
    )

    // initialize the pager plugin
    // ****************************
    .tablesorterPager(pagerOptions);

        );

使用这些 .js 文件：

<script type="text/javascript" src="js/jquery.tablesorter.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.widgets.js"></script>

感谢任何帮助，谢谢！

【参考方案1】：

使用 ajax 数据时，任何排序或过滤都必须由您的服务器完成。

要将正确的数据传递到您的服务器，需要设置ajaxUrl 选项以发布排序列、排序方向和任何过滤器（按列）。

问题中链接的演示适用于已包含所有行的表。有关 ajax 示例，请参阅this demo。请注意，ajaxUrl 显示在表格上方，并在您与表格交互时更新。 遗憾的是，这个演示没有附加到实际的数据库中，所以排序和过滤不起作用。

一旦服务器获取排序和过滤数据并将其发送回浏览器，ajaxProcessing function 就可以操作数据以进行渲染。

我希望这能解决您的问题。

【讨论】：

感谢您的回复！但是，我觉得您指的是不能解决我的问题的东西 - 请允许我添加一些信息：1）我的表已经包含所有行（比如说 50 行）。我从我的数据库中检索它们并用它的值填充我的表。因此，情况与您的示例相同（我在 OP 中提到的）。 2）寻呼机和过滤器都正常工作，除了我提到的在您的示例中有效的特定功能（mottie.github.io/tablesorter/docs/example-pager-filtered.html）。

总结一下：我想过滤当前未分页/显示的结果。这适用于您的示例，但不适用于我的代码 - 即使大多数部分是相同的；包含所有行、工作寻呼机和工作过滤器的表（该功能除外）。