使用jquery tablesorter时如何显示表中的行数？答案

【问题标题】：How do I display the number of rows in a table when using jquery tablesorter?使用jquery tablesorter时如何显示表中的行数？
【发布时间】：2017-09-19 00:58:29
【问题描述】：

我已经建立了一个有 180 行的表。该表位于此网址：

http://mywebbapp.com/tableSortingDemo.html

我想显示表格中的总行数。但是jquery tablesorter插件我只显示基于选择框值的行数。该插件没有为应该隐藏的行提供显示的 css 属性，它只是完全删除了这些行。所以我的显示计数器显示如下：

“正在查看 1 -5 of 5”我希望它显示“正在查看 1-5 of 180”。然后当我点击分页链接时，它们不会增加到“查看 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);
        });
    });

解决这个问题的好方法是什么？

【问题讨论】：

标签： jquery tablesorter jquery-pagination

【解决方案1】：

如果表中的行数没有改变，您可以在表被.tablesorter() 转换之前获取行数，并将其存储在某个变量中以供您的getCurrentRows 函数使用。即：

$(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
    }
});

【讨论】：

【解决方案2】：

扩展@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);
}

【讨论】：