在HTML表格中每页显示N行 [英] Show N rows per page in HTML table

问题描述

您好，我有一个包含很多行的html表，并且我使用JavaScript代码添加了分页选项，效果很好，但是当我加载文档时显示了所有行，并且只想显示5、10或其他内容但并非所有行.这是我的JavaScript代码和有效的小提琴:

Hello I have an html table with a lot of rows and I use a JavaScript code to add a pagination option, works fine but when I load the document shows all the rows and I want to show only 5, 10, or whatever but not all the rows. Here is my JavaScript code and the working Fiddle:

 $(document).ready(function () {
    getPagination('#Tabla');
});

function getPagination(table) {

  $('#maxRows').on('change', function() {
    $('.pagination').html(''); // reset pagination 
    var trnum = 0; // reset tr counter 
    var maxRows = parseInt($(this).val()); // get Max Rows from select option
    var totalRows = $(table + ' tbody tr').length; // numbers of rows 
    $(table + ' tr:gt(0)').each(function() { // each TR in  table and not the header
      trnum++; // Start Counter 
      if (trnum > maxRows) { // if tr number gt maxRows

        $(this).hide(); // fade it out 
      }
      if (trnum <= maxRows) {
        $(this).show();
      } // else fade in Important in case if it ..
    }); //  was fade out to fade it in 
    if (totalRows > maxRows) { // if tr total rows gt max rows option
      var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..  
      //    numbers of pages 
      for (var i = 1; i <= pagenum;) { // for each page append pagination li 
        $('.pagination').append('<li class"wp" data-page="' + i + '">\
                                      <span>' + i++ + '<span class="sr-only">(current)</span></span>\
                                    </li>').show();
      } // end for i 
    } // end if row count > max rows
    $('.pagination li:first-child').addClass('active'); // add active class to the first li 
    $('.pagination li').on('click', function() { // on click each page
      var pageNum = $(this).attr('data-page'); // get it's number
      var trIndex = 0; // reset tr counter
      $('.pagination li').removeClass('active'); // remove active class from all li 
      $(this).addClass('active'); // add active class to the clicked 
      $(table + ' tr:gt(0)').each(function() { // each tr in table not the header
        trIndex++; // tr index counter 
        // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
        if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) {
          $(this).hide();
        } else {
          $(this).show();
        } //else fade in 
      }); // end of for each tr in table
    }); // end of on click pagination list


    });
}

提琴:

工作代码

推荐答案

我已经更改了您的代码，请检查此.创建分页的功能按原样工作.只需稍作更改ni代码

I have changed your code, Check this . The function which is creating the pagination works as it is. Just a minor changes ni code

 $(document).ready(function () {
        $('#maxRows').on('change', function() {
            getPagination('#Tabla',$(this).val());
        });
    getPagination('#Tabla',2); // the no of rows default you want to show
});

function getPagination(table,noRows) {

 $('.pagination').html(''); // reset pagination 
    var trnum = 0; // reset tr counter 
    var maxRows = noRows; // get Max Rows from select option
    var totalRows = $(table + ' tbody tr').length; // numbers of rows 
    $(table + ' tr:gt(0)').each(function() { // each TR in  table and not the header
      trnum++; // Start Counter 
      if (trnum > maxRows) { // if tr number gt maxRows

        $(this).hide(); // fade it out 
      }
      if (trnum <= maxRows) {
        $(this).show();
      } // else fade in Important in case if it ..
    }); //  was fade out to fade it in 
    if (totalRows > maxRows) { // if tr total rows gt max rows option
      var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..  
      //    numbers of pages 
      for (var i = 1; i <= pagenum;) { // for each page append pagination li 
        $('.pagination').append('<li class"wp" data-page="' + i + '">\
                                      <span>' + i++ + '<span class="sr-only">(current)</span></span>\
                                    </li>').show();
      } // end for i 
    } // end if row count > max rows
    $('.pagination li:first-child').addClass('active'); // add active class to the first li 
    $('.pagination li').on('click', function() { // on click each page
      var pageNum = $(this).attr('data-page'); // get it's number
      var trIndex = 0; // reset tr counter
      $('.pagination li').removeClass('active'); // remove active class from all li 
      $(this).addClass('active'); // add active class to the clicked 
      $(table + ' tr:gt(0)').each(function() { // each tr in table not the header
        trIndex++; // tr index counter 
        // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
        if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) {
          $(this).hide();
        } else {
          $(this).show();
        } //else fade in 
      }); // end of for each tr in table
    }); // end of on click pagination list
}

更新您的小提琴

这篇关于在HTML表格中每页显示N行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！