Question

I have built a table that has 180 rows. The table is located at this url:

http://mywebbapp.com/tableSortingDemo.html

I want to display the total number of rows in the table. But the jquery tablesorter plugin I only displays the number of rows based on the select box value. The plugin does not give the rows that are supposed to be hidden a css property of diplay none it just totally removes the rows. So my display counter shows the following:

“Viewing 1 -5 of 5” I want it to show “Viewing 1-5 of 180”. And then when I click on the pagination links they don’t increment to “Viewing 6-10 of 180” and so on the just stay the same. Here is my code below.

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

What would be a good approach to solving this problem?

Answer 1

If the amount of rows in the table does not change you could just grab the row count just before your table is being transformed by the .tablesorter() and store it in a variable somewhere to be used by your getCurrentRows function. 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
    }
});