html表格分页源码,JS代码实现table数据分页效果第⼀个：实现的很常见很简单的显⽰页数翻页
效果图：
·这是HTML代码，很简单滴(我好像看到了被嫌弃的⼩眼神)
姓名性别编号年龄
原生js和js的区别
张三男tom男李四男⼆蛋男⼆丫⼥
·下⾯就是JS代码了
$(function(){
var $table=$('table');//获取表格对象
var currentPage=;//设置当前页默认值为
var pageSize=;//设置每⼀页要显⽰的数⽬
$table.bind('paging', function () {
$table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+)*pageSize).show();
//先将tbody中所有的⾏隐藏，再通过slice结合当前页数和页⾯显⽰的数⽬展现数据
});
var sumRows=$table.find('tbody tr').length;//获取数据总⾏数
var il(sumRows/pageSize);//得到总页数
var $pager=$('
for(var pageIndex=;pageIndex
$('').bind("click",{"newPage":pageIndex},function(event){
currentPage=event.data["newPage"];
$igger("paging");
/
/为每⼀个要显⽰的页数上添加触发分页函数
}).appendTo($pager);
$pager.append(" ");
}
$pager.insertAfter($table);
$igger("paging");
});
第⼆个：实现前进页和后退页
效果图：
·这是全部代码，⽤得原⽣JS，依然还是很简单滴(好像对原⽣js有种莫名的喜爱，有⽊有)
table分页
.tablebox{border:solid px #ddd;}
.tablebox td{text-align:center;border:solid px #ddd;padding:px;}
第⼀页
上⼀页
下⼀页
最后⼀页
第页/共
页
var theTable = ElementById("table");
var totalPage = ElementById("spanTotalPage");
var pageNum = ElementById("spanPageNum");
var spanPre = ElementById("spanPre");
var spanNext = ElementById("spanNext");
var spanFirst = ElementById("spanFirst"); var spanLast = ElementById("spanLast"); var numberRowsInTable = ws.length;
var pageSize = ;
var page = ;
//下⼀页
function next() {
hideTable();
currentRow = pageSize * page;
maxRow = currentRow + pageSize;
if ( maxRow > numberRowsInTable )
maxRow = numberRowsInTable;
for ( var i = currentRow; i< maxRow; i++ ) {
}
page++;
if ( maxRow == numberRowsInTable ){
nextText();
lastText();
}
showPage();
preLink();
firstLink();
}
//上⼀页
function pre() {
hideTable();
page--;
currentRow = pageSize * page;
maxRow = currentRow - pageSize;
if ( currentRow > numberRowsInTable )
currentRow = numberRowsInTable;
for ( var i = maxRow; i< currentRow; i++ ) {
}
if ( maxRow == ) {
preText();
firstText();
}
showPage();
nextLink();
lastLink();
}
//第⼀页
function first() {
hideTable();
page = ;
for ( var i = ; i
showPage();
preText();
nextLink();
lastLink();
}
//最后⼀页
function last() {
hideTable();
page = pageCount();
currentRow = pageSize * (page - ); for ( var i = currentRow; ws[i].style.display = ''; }
showPage();
preLink();
nextText();
firstLink();
}
function hideTable() {
for ( var i = ; i
}
}
function showPage() {
pageNum.innerHTML = page;
}
//总共页数
function pageCount() {
var count = ;
if ( numberRowsInTable%pageSize != ) count = ;
return parseInt(numberRowsInTable/pageSize) + count; }
//显⽰链接
function preLink() { spanPre.innerHTML = "上⼀页"; } function preText() { spanPre.innerHTML = "上⼀页"; } function nextLink() { spanNext.innerHTML = "下⼀页"; } function nextText() { spanNext.innerHTML = "下⼀页"; } function firstLink() { spanFirst.innerHTML = "第⼀页"; } function firstText() { spanFirst.innerHTML = "第⼀页"; } function lastLink() { spanLast.innerHTML = "最后⼀页"; } function lastText() { spanLast.innerHTML = "最后⼀页"; } //隐藏表格
function hide() {
for ( var i = pageSize; i
}
totalPage.innerHTML = pageCount();
pageNum.innerHTML = '';
nextLink();
lastLink();
}
hide();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。