JS代码实现table数据分页效果


Posted in Javascript onMay 26, 2016

第一个:实现的很常见很简单的显示页数翻页

 效果图:

JS代码实现table数据分页效果

•这是HTML代码,很简单滴(我好像看到了被嫌弃的小眼神)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-">
<script src="js/jquery-...js"></script>
<script src="js/demo.js"></script>
<link rel="stylesheet" href="js/demo.css"/>
<title></title>
</head>
<body>
<table width="" border="">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>编号</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td></td>
<td></td>
</tr>
<tr>
<td>tom</td>
<td>男</td>
<td></td>
<td></td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td></td>
<td></td>
</tr>
<tr>
<td>二蛋</td>
<td>男</td>
<td></td>
<td></td>
</tr>
<tr>
<td>二丫</td>
<td>女</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

•下面就是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 sumPages=Math.ceil(sumRows/pageSize);//得到总页数
var $pager=$('<div class="page"></div>');
for(var pageIndex=;pageIndex<sumPages;pageIndex++){
$('<a href="#"><span>'+(pageIndex+)+'</span></a>').bind("click",{"newPage":pageIndex},function(event){
currentPage=event.data["newPage"];
$table.trigger("paging");
//为每一个要显示的页数上添加触发分页函数
}).appendTo($pager);
$pager.append(" ");
}
$pager.insertAfter($table);
$table.trigger("paging");
});

第二个:实现前进页和后退页

效果图:

JS代码实现table数据分页效果

•这是全部代码,用得原生JS,依然还是很简单滴(好像对原生js有种莫名的喜爱,有木有)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>table分页</title>
</head>
<body>
<style type="text/css">
.tablebox{border:solid px #ddd;}
.tablebox td{text-align:center;border:solid px #ddd;padding:px;}
</style>
<div style="width:px;margin: auto;">
<table class="tablebox" width="" border="" cellpadding="" cellspacing="">
<tbody id="table">
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr><tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr><tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr><tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<div style="height:px;margin:px ;">
<span id="spanFirst">第一页</span>
<span id="spanPre">上一页</span>
<span id="spanNext">下一页</span>
<span id="spanLast">最后一页</span>
第<span id="spanPageNum"></span>页/共
<span id="spanTotalPage"></span>页
</div>
</div>
<script type="text/javascript">
var theTable = document.getElementById("table");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");
var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");
var numberRowsInTable = theTable.rows.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++ ) {
theTable.rows[i].style.display = '';
}
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++ ) {
theTable.rows[i].style.display = '';
}
if ( maxRow == ) {
preText();
firstText();
}
showPage();
nextLink();
lastLink();
}
//第一页
function first() {
hideTable();
page = ;
for ( var i = ; i<pageSize; i++ ) {
theTable.rows[i].style.display = '';
}
showPage();
preText();
nextLink();
lastLink();
}
//最后一页
function last() {
hideTable();
page = pageCount();
currentRow = pageSize * (page - );
for ( var i = currentRow; i<numberRowsInTable; i++ ) {
theTable.rows[i].style.display = '';
}
showPage();
preLink();
nextText();
firstLink();
}
function hideTable() {
for ( var i = ; i<numberRowsInTable; i++ ) {
theTable.rows[i].style.display = 'none';
}
}
function showPage() {
pageNum.innerHTML = page;
}
//总共页数
function pageCount() {
var count = ;
if ( numberRowsInTable%pageSize != ) count = ; 
return parseInt(numberRowsInTable/pageSize) + count;
}
//显示链接
function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; }
function preText() { spanPre.innerHTML = "上一页"; }
function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; }
function nextText() { spanNext.innerHTML = "下一页"; }
function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; }
function firstText() { spanFirst.innerHTML = "第一页"; }
function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; }
function lastText() { spanLast.innerHTML = "最后一页"; }
//隐藏表格
function hide() {
for ( var i = pageSize; i<numberRowsInTable; i++ ) {
theTable.rows[i].style.display = 'none';
}
totalPage.innerHTML = pageCount();
pageNum.innerHTML = '';
nextLink();
lastLink();
}
hide();
</script>
</body>
</html>

以上内容是小编给大家介绍的JS代码实现table数据分页效果,希望对大家有所帮助,如果大家还有任何问题欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
js前端导出Excel的方法
Nov 01 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 #Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 #Javascript
JavaScript数组的栈方法与队列方法详解
May 26 #Javascript
详解JavaScript中this关键字的用法
May 26 #Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 #Javascript
js操作数据库实现注册和登陆的简单实例
May 26 #Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 #Javascript
You might like
拼音码表的生成
2006/10/09 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
3种php生成唯一id的方法
2015/11/23 PHP
微信支付开发发货通知实例
2016/07/12 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
Js中sort()方法的用法
2006/11/04 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
详解 vue.js用法和特性
2017/10/15 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
JSON Web Tokens的实现原理
2017/04/02 Python
Python多线程实现同步的四种方式
2017/05/02 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
零件设计自荐信范文
2013/11/27 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
医院消毒隔离制度
2015/08/05 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python