1

180行のテーブルを作成しました。テーブルは次のURLにあります：

http://mywebbapp.com/tableSortingDemo.html

テーブルの合計行数を表示したい。しかし、jquery tablesorterプラグインは、選択ボックスの値に基づいて行数のみを表示します。プラグインは、非表示になっているはずの行にdiplayのcssプロパティを与えません。行を完全に削除するだけです。したがって、私のディスプレイカウンターには次のように表示されます。

「Viewing1-5of5」「Viewing1-5of180」を表示したい。そして、ページネーションのリンクをクリックしても、「Viewing 6-10 of 180」などには増えませんが、同じままです。これが私のコードです。

$(document).ready(function ()
    {
        // add new widget called repeatHeaders 
        $.tablesorter.addWidget({
            // give the widget a id 
            id: "repeatHeaders",
            // format is called when the on init and when a sorting has finished 
            format: function (table) {
                // cache and collect all TH headers 
                if (!this.headers) {
                    var h = this.headers = [];
                    $("thead th", table).each(function () {
                        h.push("" + $(this).text() + "");

                    });
                }
                // remove appended headers by classname. 
                $("tr.repated-header", table).remove();
                // loop all tr elements and insert a copy of the "headers"     
                for (var i = 0; i < table.tBodies[0].rows.length; i++) {
                    // insert a copy of the table head every 10th row 
                    if ((i % 5) == 4) {
                        $("tbody tr:eq(" + i + ")", table).before($("").html(this.headers.join("")));
                    }
                }
            }
        });
        $("table")
            .tablesorter({ widthFixed: true, widgets: ['zebra'], headers: {
                5: {
                    sorter: false
                },
                6: {
                    sorter: false
                },
                7: {
                    sorter: false
                },
                8: {
                    sorter: false
                }
            }
            })
            .tablesorterPager({ container: $("#pager") });
        $('#pager').css({ 'top': '', 'position': 'relative', 'text-align': 'center' });
        $('#pager img').click(function () {
            $('#pager').css({ 'top': '', 'position': 'relative', 'text-align': 'center' });
            getCurrentRows($('.pagesize').val(), pageDisplay, $('#ClaimsList tbody tr').length);
        });
        $('.pagesize').click(function () {
            $('#pager').css({ 'top': '', 'position': 'relative', 'text-align': 'center' });
        });
        var pageSize = $(".pagesize").val();

        var pageDisplay = parseInt($('.pagedisplay').val());
        function getCurrentRows(rowsPerPage, currPage, rowCount) {
            var from = (rowsPerPage * currPage) - rowsPerPage + 1;
            var to = (rowsPerPage * currPage) > rowCount ? rowCount : rowsPerPage * currPage;
            return $('#viewRowCount').html("Viewing " + from + " -" + to + " of " + rowCount);
        }
        getCurrentRows($('.pagesize').val(), pageDisplay, $('#ClaimsList tbody tr').length);
        $('.pagesize').change(function () {
            getCurrentRows($('.pagesize').val(), pageDisplay, $('#ClaimsList tbody tr').length);
        });
    });

この問題を解決するための良いアプローチは何でしょうか？

4

2 に答える 2

3

テーブルの行数が変わらない場合は、テーブルがによって変換される直前に行数を取得し、関数.tablesorter()で使用する変数に格納することができますgetCurrentRows。IE：

$(document).ready(function (){
    // get rowCount and store it
    $('#ClaimsList').data("rowCount", $('#ClaimsList tbody tr').length);

    // code

    function getCurrentRows(rowsPerPage, currPage) {
        var rowCount = $('#ClaimsList').data("rowCount");
        // etc
    }
});
于 2011-06-24T20:57:25.390 に答える
0

@Björnの答えを拡張する-フィルタリングされた行もレポートする場合は、フィルタリングされた行の数を減算しrowCountて、フィルターへの変更を設定できます。

$(document).ready(function () {
    // initialize row counter, store it in the table
    updateCurrentRows();

    // upon change to filter, update it
    $('input.tablesorter-filter').on('input', function () {
        updateCurrentRows();
    });
});

function updateCurrentRows() {
    // replace myTable with yours
    $('#myTable').data("rowCount", ($('#myTable tbody tr').length - $('#myTable tbody tr.filtered').length));
    var rowCount = $('#myTable').data("rowCount");
    console.log(rowCount);

    // optional way to report your rows in HTML. 
    $("#getCurrentRows").text(rowCount);
}
于 2017-09-18T16:58:29.997 に答える