如何在 HTML 表格上使用分页？
[英]How to use pagination on HTML tables?
问题描述
我试图在我的 HTML 表格页面（特别是轻主题）中使用这个分页库，但不知何故我无法理解如何在我的 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>
基于我上面的 HTML 代码的任何简单的 jsfiddle 示例，并结合上面的分页 javascript 将帮助我更好地理解如何在 HTML 表上实现这个 js..
谢谢您的帮助..
笔记：-
我只对我目前正在尝试实施的 simplePagination.js 解决方案感兴趣
10 个解决方案
解决方案1
44 2015-01-29 03:49:40
很多时候我们可能想使用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/
解决方案2
13 已采纳 2013-10-26 09:37:45
在 html 表上实现分页http://tablesorter.com/docs/example-pager.html是 jquery 中一个非常简单有效的实用程序构建
从http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js下载插件
添加此插件后，在头脚本中添加以下代码
$(document).ready(function() {
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});
解决方案3
11 2015-12-16 16:55:27
对我来说，最好和最简单的方法是 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' 值用于设置您想要拥有的每页元素数量。
解决方案4
6 2018-09-16 16:27:20
纯js 。 可以一次将其应用于多个表。 如果只需要一页则中止。 我使用 anushree 作为我的起点。
对提问者很抱歉，显然这不是一个 simplePagignation.js 解决方案。 但是，当您键入“javascript table paging”时，这是 google 的最高结果，对于许多可能正在考虑使用库但不确定是否走这条路的人来说，这是一个合理的解决方案。
像这样使用：
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';
}
}
解决方案5
3 2015-12-14 20:43:28
你可以使用这个功能。 它取自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();
}
});
}
解决方案6
2 2016-04-03 18:33:11
有一种使用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);
更多信息。
工作示例。
解决方案7
0 2014-12-29 09:16:16
据我在该分页插件的网站上看到的，该插件本身并没有进行实际的分页。 它唯一能做的就是显示一行数字，并根据您所在的页面显示正确的按钮。
但是，要真正进行分页，您必须自己编写适当的 Javascript。 这应该代替这个Javascript：
function test(pageNumber)
{
var page="#page-id-"+pageNumber;
$('.select').hide()
$(page).show()
}
这是我猜你从某个地方复制粘贴的代码，但目前并没有真正做任何事情。 如果您不知道 Javascript，那么使用另一个实际对表格进行分页的库是您可能想要做的事情。
解决方案8
0 2018-04-04 19:48:31
参考上面的 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);
});
}
});
});
解决方案9
0 2021-01-12 15:43:33
使用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>
解决方案10
0 2021-12-18 11:02:33
只是用 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);
});
}
带有jQuery分页的HTML表
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.