Question

我已经构建了一个包含180行的表。该表位于此网址：

http://mywebbapp.com/tableSortingDemo.html

我想显示表格中的总行数。但是jquery tablesorter插件我只根据选择框值显示行数。该插件不会给应该隐藏的行显示diplay的css属性，它只是完全删除行。所以我的展示柜台显示以下内容：

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

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

Answer 1

如果表中的行数没有改变，您可以在.tablesorter()转换表之前获取行计数，并将其存储在某个地方的变量中以供{{1功能。 IE：

getCurrentRows

Answer 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);
}

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

2 个答案: