如何在 HTML 表格上使用分页？
Posted
技术标签:
【中文标题】如何在 HTML 表格上使用分页？【英文标题】：How to use pagination on HTML tables? 【发布时间】：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 解决方案感兴趣
【问题讨论】：
【参考方案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 或更高版本） 该网站已关闭。 网站好像不存在了以上是关于如何在 HTML 表格上使用分页？的主要内容，如果未能解决你的问题，请参考以下文章
Datatables：在drawCallBack之后用Angular编译表格HTML时如何使分页工作？