如何在 HTML 表格上使用分页？答案

【问题标题】：How to use pagination on HTML tables?如何在 HTML 表格上使用分页？
【发布时间】：2013-11-05 11:18:26
【问题描述】：

我正在尝试在我的 HTML 表格页面（特别是轻主题）中使用这个 Pagination library，但不知何故我无法理解如何在我的 HTML 页面中以这种方式插入这个库，以便我可以进行分页在我的 HTML 表中工作的代码..

现在，我有一个没有任何分页代码的 HTML 表格，所以我下面的 HTML 代码将向您显示一个表格，其中包含一页中的所有行，这不是我想要的......

我想通过使用上面的分页javascript在一页中显示我的表格中的6个项目。当我点击第二个分页选项卡时，它应该显示接下来的六个项目并继续直到完成..

下面是我的完整 HTML 代码，我在其中尝试使用与上面相同的分页 javascript，但它对我不起作用..

<html>
<head>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="../jquery.simplePagination.js"></script>
<link href="../simplePagination.css" rel="stylesheet" type="text/css" />


    <style type="text/css">
table {
    width: 40em;
    margin: 2em auto;
    }

    thead {
    background: #000;
    color: #fff;
    }

    td {
    width: 10em;
    padding: 0.3em;
    }

    tbody {
    background: #ccc;
    }

    </style>

    <script>

function test(pageNumber)
{

  var page="#page-id-"+pageNumber;
  $('.select').hide()
  $(page).show()

}

</script>

</head>

<body bgcolor="#F8F8F8">
    <table class="paginated">
        <thead>
            <tr>
                <th>A</th>

                <th>B</th>

                <th>C</th>

                <th>D</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>
        </tbody>
    </table>

<div id="choose">
</div>


    <script language="javascript">
    $(function() {
        $('#choose').pagination({
            items: 20,
            itemsOnPage: 2,
            cssStyle: 'light-theme',
            onPageClick: function(pageNumber){test(pageNumber)}
        });
    });
    </script>

    </body>
</html>

任何简单的 jsfiddle 示例都基于我上面的 HTML 代码并结合上面的分页 javascript 将帮助我更好地理解如何在 HTML 表格上实现这个 js..

感谢您的帮助..

注意：-

我只对我目前正在尝试实施的 simplePagination.js 解决方案感兴趣

【问题讨论】：

标签： javascript jquery html css pagination

【解决方案1】：

只是用 bootstrap 4 版本扩展@anushree 的答案。：-

只要你想调用分页。

function Pagination() {
    $('#table').after('<nav id="nav" aria-label="Page navigation example"></nav><ul class="pagination"></ul>');
    var rowsShown = 20;
    var rowsTotal = $('#table tbody tr').length;
    console.log("rowsTotal"),rowsTotal
    var numPages = rowsTotal / rowsShown;
    for (i = 0; i < numPages; i++) {
        var pageNum = i + 1;
        $('.pagination').append('<li class="page-item"><a class="page-link" href="javascript:void()" rel="' + i + '">' + pageNum + '</a></li> ');
    }
    $('#table tbody tr').hide();
    $('#table tbody tr').slice(0, rowsShown).show();
    $('.pagination a:first').addClass('active');
    $('.pagination a').bind('click', function () {

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

【讨论】：

【解决方案2】：

使用tr 到<tr class="paginate">

//分页

<div id="page-nav"></div>

//脚本

 <script>
        jQuery(function($) {
            // Grab whatever we need to paginate
            var pageParts = $(".paginate");
    
            // How many parts do we have?
            var numPages = 100;
            // How many parts do we want per page?
            var perPage = 10;
    
            // When the document loads we're on page 1
            // So to start with... hide everything else
            pageParts.slice(perPage).hide();
            // Apply simplePagination to our placeholder
            $("#page-nav").pagination({
                items: numPages,
                itemsOnPage: perPage,
                cssStyle: "light-theme",
                // We implement the actual pagination
                //   in this next function. It runs on
                //   the event that a user changes page
                onPageClick: function(pageNum) {
                    // Which page parts do we show?
                    var start = perPage * (pageNum - 1);
                    var end = start + perPage;
    
                    // First hide all page parts
                    // Then show those just for our page
                    pageParts.hide()
                        .slice(start, end).show();
                }
            });
        });
    </script>

【讨论】：

【解决方案3】：

纯js。可以一次将其应用于多个表。如果只需要一页，则中止。我以 anushree 为起点。

抱歉提问者，显然这不是一个简单的 Pagignation.js 解决方案。但是，当您键入“javascript table paging”时，它是谷歌搜索结果的首选，对于许多可能正在考虑使用库但不确定是否走这条路的人来说，这是一个合理的解决方案。

这样使用：

addPagerToTables('#someTable', 8);

不需要 css，尽管最初在 css 中隐藏表 tBody 行可能是明智的，以防止显示的行随后被快速隐藏（我现在没有发生这种情况，但这是我以前见过的）。

代码：

function addPagerToTables(tables, rowsPerPage = 10) {

    tables = 
        typeof tables == "string"
      ? document.querySelectorAll(tables)
      : tables;

    for (let table of tables) 
        addPagerToTable(table, rowsPerPage);

}

function addPagerToTable(table, rowsPerPage = 10) {

    let tBodyRows = table.querySelectorAll('tBody tr');
    let numPages = Math.ceil(tBodyRows.length/rowsPerPage);

    let colCount = 
    [].slice.call(
        table.querySelector('tr').cells
    )
    .reduce((a,b) => a + parseInt(b.colSpan), 0);

    table
    .createTFoot()
    .insertRow()
    .innerHTML = `<td colspan=${colCount}><div class="nav"></div></td>`;

    if(numPages == 1)
        return;

    for(i = 0;i < numPages;i++) {

        let pageNum = i + 1;

        table.querySelector('.nav')
        .insertAdjacentHTML(
            'beforeend',
            `<a href="#" rel="${i}">${pageNum}</a> `        
        );

    }

    changeToPage(table, 1, rowsPerPage);

    for (let navA of table.querySelectorAll('.nav a'))
        navA.addEventListener(
            'click', 
            e => changeToPage(
                table, 
                parseInt(e.target.innerHTML), 
                rowsPerPage
            )
        );

}

function changeToPage(table, page, rowsPerPage) {

    let startItem = (page - 1) * rowsPerPage;
    let endItem = startItem + rowsPerPage;
    let navAs = table.querySelectorAll('.nav a');
    let tBodyRows = table.querySelectorAll('tBody tr');

    for (let nix = 0; nix < navAs.length; nix++) {

        if (nix == page - 1)
            navAs[nix].classList.add('active');
        else 
            navAs[nix].classList.remove('active');

        for (let trix = 0; trix < tBodyRows.length; trix++) 
            tBodyRows[trix].style.display = 
                (trix >= startItem && trix < endItem)
                ? 'table-row'
                : 'none';  

    }

}

【讨论】：

【解决方案4】：

参考上面的 Anusree 回答并尊重，我正在稍微调整代码以确保它在大多数情况下都能正常工作。

创建了一个可重复使用的函数 paginate('#myTableId')，可以为任何表调用任意次数。
在 ajaxComplete 函数中添加代码，以确保在使用 jquery 的表完全加载后调用分页。我们主要将分页用于基于 ajax 的表。
删除分页 div 并在每次分页调用时重新绑定
配置每页的行数

代码：

$(document).ready(function () {
    $(document).ajaxComplete(function () {
        paginate('#myTableId',10);
        function paginate(tableName,RecordsPerPage) {
            $('#nav').remove();
            $(tableName).after('<div id="nav"></div>');
            var rowsShown = RecordsPerPage;
            var rowsTotal = $(tableName + ' tbody tr').length;
            var numPages = rowsTotal / rowsShown;
            for (i = 0; i < numPages; i++) {
                var pageNum = i + 1;
                $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
            }
            $(tableName + ' tbody tr').hide();
            $(tableName + ' 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;
                $(tableName + ' tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
                    css('display', 'table-row').animate({ opacity: 1 }, 300);
            });
        }
    });
});

【讨论】：

【解决方案5】：

很多时候我们可能想用jquery进行表格分页，这里我给你答案和参考链接

jQuery

  $(document).ready(function(){
        $('#data').after('<div id="nav"></div>');
        var rowsShown = 4;
        var rowsTotal = $('#data tbody tr').length;
        var numPages = rowsTotal/rowsShown;
        for(i = 0;i < numPages;i++) {
            var pageNum = i + 1;
            $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
        }
        $('#data tbody tr').hide();
        $('#data 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;
            $('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
                    css('display','table-row').animate({opacity:1}, 300);
        });
    });

JSfiddle：https://jsfiddle.net/u9d1ewsh/

【讨论】：

不错。如果有人想要没有插件
谢谢你..我面临的一个问题是当它分页滚动位置重置为顶部..任何解决方案？
添加一个 e.preventDefault();在“点击”事件之后立即停止向上滚动
太棒了！不得不稍作修改，因为我需要根据单击下一个或上一个来更改我的页面，但这是一个很好的起点！
对于任何想知道如何阻止滚动位置从重置到顶部的人，请更改此行中的 href="#" $('#nav') .append(''+pageNum+' '); 到 href="javascript:void()"乙>。它阻止它执行任何默认操作。

【解决方案6】：

有一种使用breedjs（jQuery 插件）对表格进行分页的简单方法，请参见示例：

HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Gender</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr b-scope="people" b-loop="person in people" b-paginate="5">
      <td>{{person.name}}</td>
      <td>{{person.gender}}</td>
      <td>{{person.age}}</td>
      <td>{{person.email}}</td>
    </tr>
  </tbody>
</table>
<ul></ul>

JS

var data={ people: [ {...}, {...}, ...] };

$(function() {
  breed.run({
    scope: 'people',
    input: data,
    runEnd: function(){ //This runEnd is just to mount the page buttons
        for(i=1 ; i<=breed.getPageCount('people') ; i++){
        $('ul').append(
            $('<li>',{
            html: i,
            onclick: "breed.paginate({scope: 'people', page: " + i + "});"
          })
        );
      }
    }
  });
});

每次要换页时，只需调用：

breed.paginate({scope: 'people', page: pageNumber);

More info.

Working example.

【讨论】：

【解决方案7】：

对我来说，最好和最简单的方法，Bootply http://www.bootply.com/lxa0FF9yhw#

首先将 Bootstrap 包含到您的项目中

然后包含您编写此代码的 javascript 文件：

    $.fn.pageMe = function(opts){
    var $this = this,
        defaults = {
            perPage: 7,
            showPrevNext: false,
            hidePageNumbers: false
        },
        settings = $.extend(defaults, opts);

    var listElement = $this;
    var perPage = settings.perPage; 
    var children = listElement.children();
    var pager = $('.pager');

    if (typeof settings.childSelector!="undefined") {
        children = listElement.find(settings.childSelector);
    }

    if (typeof settings.pagerSelector!="undefined") {
        pager = $(settings.pagerSelector);
    }

    var numItems = children.size();
    var numPages = Math.ceil(numItems/perPage);

    pager.data("curr",0);

    if (settings.showPrevNext){
        $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
    }

    var curr = 0;
    while(numPages > curr && (settings.hidePageNumbers==false)){
        $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
        curr++;
    }

    if (settings.showPrevNext){
        $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
    }

    pager.find('.page_link:first').addClass('active');
    pager.find('.prev_link').hide();
    if (numPages<=1) {
        pager.find('.next_link').hide();
    }
    pager.children().eq(1).addClass("active");

    children.hide();
    children.slice(0, perPage).show();

    pager.find('li .page_link').click(function(){
        var clickedPage = $(this).html().valueOf()-1;
        goTo(clickedPage,perPage);
        return false;
    });
    pager.find('li .prev_link').click(function(){
        previous();
        return false;
    });
    pager.find('li .next_link').click(function(){
        next();
        return false;
    });

    function previous(){
        var goToPage = parseInt(pager.data("curr")) - 1;
        goTo(goToPage);
    }

    function next(){
        goToPage = parseInt(pager.data("curr")) + 1;
        goTo(goToPage);
    }

    function goTo(page){
        var startAt = page * perPage,
            endOn = startAt + perPage;

        children.css('display','none').slice(startAt, endOn).show();

        if (page>=1) {
            pager.find('.prev_link').show();
        }
        else {
            pager.find('.prev_link').hide();
        }

        if (page<(numPages-1)) {
            pager.find('.next_link').show();
        }
        else {
            pager.find('.next_link').hide();
        }

        pager.data("curr",page);
        pager.children().removeClass("active");
        pager.children().eq(page+1).addClass("active");

    }
};

您需要为表格的 tbody 提供一个 id，并在表格后添加一个 'div' 以进行分页

     <table class="table" id="myTable">
            <thead>
                <tr>
                    <th>...</th>
                </tr>
            </thead>
            <tbody id="myTableBody">
            </tbody>
       </table>
       <div class="col-md-12 text-center">
           <ul class="pagination pagination-lg pager" id="myPager"></ul>
       </div>

当你的表格数据加载完毕后，调用这个

$('#myTableBody').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4});

'perPage' 值用于设置您希望每页拥有多少元素。

【讨论】：

我正在尝试这段代码。但每次我运行它时，我都会在控制台TypeError: listElement.children is not a function 中收到此错误我试图用(jQuery); 结束我的代码，因为我将代码放在一个单独的文件中但仍然遇到相同的错误。
您是否将其包含在您的 html 中？
谢谢！为我节省了很多时间。

【解决方案8】：

你可以使用这个功能。取自https://convertintowordpress.com/simple-jquery-table-pagination-code/

function pagination(){
    var req_num_row=10;
    var $tr=jQuery('tbody tr');
    var total_num_row=$tr.length;
    var num_pages=0;
    if(total_num_row % req_num_row ==0){
        num_pages=total_num_row / req_num_row;
    }
    if(total_num_row % req_num_row >=1){
        num_pages=total_num_row / req_num_row;
        num_pages++;
        num_pages=Math.floor(num_pages++);
    }
    for(var i=1; i<=num_pages; i++){
        jQuery('#pagination').append("<a href='#' class='btn'>"+i+"</a>");
    }
    $tr.each(function(i){
        jQuery(this).hide();
        if(i+1 <= req_num_row){
            $tr.eq(i).show();
        }

    });
    jQuery('#pagination a').click(function(e){
        e.preventDefault();
        $tr.hide();
        var page=jQuery(this).text();
        var temp=page-1;
        var start=temp*req_num_row;
        //alert(start);

        for(var i=0; i< req_num_row; i++){

            $tr.eq(start+i).show();

        }
    });
}

【讨论】：

【解决方案9】：

据我在该分页插件的网站上看到的，该插件本身并没有进行实际分页。它唯一做的就是显示一行数字，并根据您所在的页面显示正确的按钮。

但是，要实际分页，您必须自己编写适当的 Javascript。这应该代替这个Javascript：

function test(pageNumber)
{

  var page="#page-id-"+pageNumber;
  $('.select').hide()
  $(page).show()

}

我猜你是从某个地方复制粘贴的代码，但目前并没有真正做任何事情。如果您不了解 Javascript，那么您可能想要使用另一个实际对表格进行分页的库。

【讨论】：

【解决方案10】：

在jquery中构建的一个非常简单有效的实用程序，可以在html表上实现分页http://tablesorter.com/docs/example-pager.html

从http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js下载插件

添加此插件后，在头脚本中添加以下代码

$(document).ready(function() { 
    $("table") 
    .tablesorter({widthFixed: true, widgets: ['zebra']}) 
    .tablesorterPager({container: $("#pager")}); 
});

【讨论】：

谢谢 Ashwin.. 但我对分页库 javascript 解决方案特别感兴趣.. 无论如何感谢您的帮助...
Uncaught TypeError: $(...).tablesorter is not a function 给了我这个错误。我还包含插件文件，但仍然出现此错误
使用 jQuery（1.2.1 或更高版本）
该网站已关闭。
网站好像不存在了