Question

我使用jQuery在HTML页面中为表格创建了分页。以下代码正在工作。

  $(document).ready(function(){
      $('#transactionsTable').after('<ul id="nav" class="pagination"></ul>');
      var rowsShown = 10;
      var rowsTotal = $('#transactionsTable tbody tr').length;
      var numPages = rowsTotal/rowsShown;
      for(i = 0;i < numPages;i++) {
          var pageNum = i + 1;
          $('#nav').append('<li class="page-item"><a class="page-link" href="#" rel="'+i+'">'+pageNum+'</a></li> ');
      }
      $('#transactionsTable tbody tr').hide();
      $('#transactionsTable tbody tr').slice(0, rowsShown).show();
      $('#nav a:first').addClass('active');
      $('#nav a').bind('click', function(){

          $('#nav a').removeClass('active');
          $(this).addClass('active');
          var currPage = $(this).attr('rel');
          var startItem = currPage * rowsShown;
          var endItem = startItem + rowsShown;
          $('#transactionsTable tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
          css('display','table-row').animate({opacity:1}, 300);
      });
  });

每页显示10行表格和分页栏。现在，我想设置每页显示的动态行数。所以我创建了一个<select>，其中包含多个<option> s，例如10、25、50、100

<select id="pagingCount" class="">
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select>

并按如下所示更改代码

var rowsShown = $('#pagingCount').val();

，但是它不起作用。始终每页显示10行。我该如何解决？

Answer 1

您必须尝试使用:selected来获取当前值。

var rowsShown = $('#pagingCount option:selected').val();

Answer 2

您可以使用此代码获得选定的值。

在JQuery中获取所选值很简单。

var rowsShown= $('#pagingCount').find(":selected").text();

Answer 3

您将必须在代码块中更改rowsShown的值。

function showRows(rowsShown){
      $('#transactionsTable').after('<ul id="nav" class="pagination"></ul>');
      var rowsTotal = $('#transactionsTable tbody tr').length;
      var numPages = rowsTotal/rowsShown;
      for(i = 0;i < numPages;i++) {
          var pageNum = i + 1;
          $('#nav').append('<li class="page-item"><a class="page-link" href="#" rel="'+i+'">'+pageNum+'</a></li> ');
      }
      $('#transactionsTable tbody tr').hide();
      $('#transactionsTable tbody tr').slice(0, rowsShown).show();
      $('#nav a:first').addClass('active');
      $('#nav a').bind('click', function(){

          $('#nav a').removeClass('active');
          $(this).addClass('active');
          var currPage = $(this).attr('rel');
          var startItem = currPage * rowsShown;
          var endItem = startItem + rowsShown;
          $('#transactionsTable tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
          css('display','table-row').animate({opacity:1}, 300);
      });

}
  $(document).ready(function(){
   showRows(10);
  });

$("#pagingCount").on("change", function(e){
  showRows(e.target.value);
});

希望这对您有用。

HTML选择更改不适用于jQuery函数

3 个答案: