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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
支付宝小程序实现省市区三级联动
Jun 21 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
DWZ刷新dialog解决方法
2013/03/03 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
python封装对象实现时间效果
2020/04/23 Python
详解Python当中的字符串和编码
2015/04/25 Python
使用Python绘制图表大全总结
2017/02/11 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
单位提档介绍信
2014/01/17 职场文书
社区志愿者活动总结
2014/06/26 职场文书
初中学生操行评语
2014/12/26 职场文书
党员个人年度总结
2015/02/14 职场文书
演讲开场白台词大全
2015/05/29 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
Python获取字典中某个key的value
2022/04/13 Python