Как отобразить количество строк в таблице при использовании jquery tableorter?

Question

Я построил таблицу из 180 строк.Таблица расположена по этому адресу:

http://mywebbapp.com/tableSortingDemo.html

Я хочу отобразить общее количество строк в таблице.Но плагин jquery tablesorter I отображает только количество строк в зависимости от значения поля выбора.Плагин не дает строкам, которые должны быть скрыты, свойства css для diplay, он просто полностью удаляет строки.Итак, мой счетчик отображает следующее:

«Просмотр 1 -5 из 5» Я хочу, чтобы он отображал «Просмотр 1-5 из 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(), и сохранить его в переменной где-нибудь для использования вашей функцией 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
    }
});

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