你好，我有一个包含很多行的 html 表，我使用 JavaScript 代码添加分页选项，工作正常，但是当我加载文档时显示所有行，我只想显示 5、10 或其他行，但不是全部行。这是我的 JavaScript 代码和工作中的 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
});
}
Fiddle:
工作代码
我已经改变了你的代码，检查一下。创建分页的函数按原样工作。只需对代码进行微小更改
$(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
}
更新你的小提琴
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
