Как отобразить количество строк в таблице при использовании 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);
}