如何在使用jquery tablesorter時顯示錶中的行數？

Question

我建立了一個有180行的表格。該表位於此網址：

http://mywebbapp.com/tableSortingDemo.html

我要顯示錶中的行的總數。但jquery tablesorter插件我只顯示基於選擇框值的行數。該插件沒有給出應該隱藏diplay的CSS屬性的行，它只是完全刪除行。所以我的顯示計數器顯示如下：

「正在查看1 - 5的5」我希望它顯示「查看1-5的180」。然後，當我點擊分頁鏈接時，它們不會增加到「查看180的6-10」等等，只是保持不變。以下是我的代碼如下。

$(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

延長關閉的@比約恩的答案 - 如果你想報告過濾行爲好，可以減去過濾的行數和變化的過濾器設置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); 
}