3

tablesorterプラグインが追加されたテーブルがあります。フィルタウィジェットページャープラグインの両方を有効にしました。

私が抱えている問題は、フィルター入力に値を入力しても、ページャーが更新されないことです(結果の合計、およびページャーがページ数を設定する場合)。
また、テーブル全体ではなく、ページングされた結果のみをフィルタリングしているようです。

このように動作させることは可能ですか?
私はドキュメントを見ましたが、それを行う方法がわかりません(また、私のjsはそれほど良くありません)。

ありとあらゆる助けに感謝します。

私のテーブルソーター設定:

var pagerOptions = { 

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

            // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows} 
            output: '{startRow} to {endRow} ({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, 

            // 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: true, 

            // 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 
            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 

        }; 

        $.tablesorter.addParser({
            id: "datetime",
            is: function(s) {
                return false; 
            },
            format: function(s,table, cell) {
                s = s.replace(/\-/g,"/");
                s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1");
                return $.tablesorter.formatFloat(new Date(s).getTime());
            },
            type: "numeric"
        });

        $("#results").tablesorter({

        // initialize zebra striping and filter widgets
        widgets: ["zebra", "filter"],

        // headers: { 5: { sorter: false, filter: false } },

        widgetOptions : {

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

            // 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 : true,

            // 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,

            // Set this option to false to make the searches case sensitive
            filter_ignoreCase : true,

            // 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,

            // See the filter widget advanced demo on how to use these special functions
            filter_functions : {
                            4 : function(e, n, f, i) { 
                                alert(e);
                                console.log(e);
                                if (e != "") {
                                    return e === f; 
                                }
                            }
                        },

                        empty: 'bottom',

                        dateFormat : "ddmmyyyy"

        },
                widthFixed: true
    })
        .tablesorterPager(pagerOptions) 

        // bind to pager events 
        // ********************* 
        .bind('pagerChange pagerComplete', function(e,c){ 
            console.log(e);
            console.log(c);

        var msg = '" event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') + 
            ' page ' + (c.page + 1) + '/' + c.totalPages; 
        $('#display') 
            .append('<li>"' + e.type + msg + '</li>') 
            .find('li:first').remove(); 
        });
4

1 に答える 1

1

フィルタウィジェットとページャープラグイン/ウィジェットは連携して機能するようになりましたが、ページャーremoveRowsオプションはに設定する必要がありますfalse。このオプションは、現在のページ(表示)行をDOMに追加するだけでなく、すべての行をテーブル内に保持します。

ブートストラップテーマのデモ

「近い将来」のバージョンではremoveRows、フィルターウィジェットがテーブル内の行ではなく、保存されているキャッシュされた行にアクセスするため、このオプションは必須ではなくなります。

于 2014-03-21T19:50:04.770 に答える