Question

I have this table where I got the pagination working. I have a select box with options to display 5, 25, 50, or 100 rows on a page. I also have first, previous, next, and last links for table pagination. How do I display a count of rows such as Viewing 6 – 10 of 25?

Here is the JSFiddle link:

http://jsfiddle.net/t5Kg6/

I tried this following code but it does not work:

var rowCount = $('#ClaimsList tbody tr').length;
                var numOfVisibleRows = $('tbody tr:visible').length;
                $('#viewRowCount').html('Viewing ' + numOfVisibleRows + ' of' + rowCount);
                $('#tablePagination_rowsPerPage').change(function(){
                    $('#viewRowCount').html('Viewing ' + numOfVisibleRows + ' of' + rowCount);
                });

Answer 1

Basically, you want something like this:

function getCurrentRows(rowsPerPage, currPage, rowCount) {
    var from = (rowsPerPage * currPage) - rowsPerPage + 1;
    var to = (rowsPerPage * currPage) > rowCount ? rowCount : rowsPerPage * currPage;
    return "Viewing rows " + from + " to " + to + " of " + rowCount;
}

and call it (in your example) like this:

getCurrentRows($('#tablePagination_rowsPerPage').val(),
               $('#tablePagination_currPage').val(),
               $('#ClaimsList tbody tr').length);