自我反思--table的简单数据分页
自我反思
几天没有写工作总结了，整个人都变得懒散了。公司的工作也确实是不紧张，对于我这种自制力不强的人简直是。。。（想不到词了），完全放了风了。。。
每天逛逛淘宝，买些乱七八糟其实并没有什么用处的东西，逛逛论坛，吐槽各种新鲜事，和朋友唠唠嗑，唠到人家都去忙了，完了就盯着电脑发呆等着下班。。
还好本姑娘今天幡然醒悟，还是要自己逼着自己去做点神码的，不然明儿自己都不知道自己咋死的。。哈
学习
之前做的东西，用到table里面数据的分页小标签都是用的插件，好看又方便，今天脑子抽抽了看了看人家的代码，大写的蒙圈，就找了找简单的，还好俺这个小菜鸟还算能看懂，学者比划了两下子，以后慢慢做的漂亮些就能用到项目里面了，哈哈，我骄傲！
第一个：实现的很常见很简单的显示页数翻页
效果图：
- 这是HTML代码，很简单滴（我好像看到了被嫌弃的小眼神）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js0/jquery-1.11.3.js"></script>
<script src="js0/demo.js"></script>
<link rel="stylesheet" href="js0/demo.css"/>
<title></title>
</head>
<body>
<table width="200" border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>编号</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>001</td>
<td>15</td>
</tr>
<tr>
<td>tom</td>
<td>男</td>
<td>002</td>
<td>15</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>003</td>
<td>15</td>
</tr>
<tr>
<td>二蛋</td>
<td>男</td>
<td>004</td>
<td>15</td>
</tr>
<tr>
<td>二丫</td>
<td>女</td>
<td>005</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>
- 下面就是JS代码了
$(function(){
var $table=$('table');//获取表格对象
var currentPage=0;//设置当前页默认值为0
var pageSize=2;//设置每一页要显示的数目
$table.bind('paging', function () {
$table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*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=0;pageIndex<sumPages;pageIndex++){
$('<a href="#"><span>'+(pageIndex+1)+'</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，依然还是很简单滴（好像对原生js有种莫名的喜爱，有木有）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table分页</title>
</head>
<body>
<style type="text/css">
.tablebox{border:solid 1px #ddd;}
.tablebox td{text-align:center;border:solid 1px #ddd;padding:5px;}
</style> <div style="width:530px;margin:0 auto;">
<table class="tablebox" width="500" border="0" cellpadding="0" cellspacing="0">
<tbody id="table2">
<tr>
<td>1</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>9</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>10</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>11</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>12</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr><tr>
<td>13</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr><tr>
<td>14</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr><tr>
<td>15</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table> <div style="height:30px;margin:20px 0 0 0;">
<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("table2");
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 = 6;
var page = 1;
//下一页
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 == 0 ) {
preText();
firstText();
}
showPage();
nextLink();
lastLink();
}
//第一页
function first() {
hideTable();
page = 1;
for ( var i = 0; i<pageSize; i++ ) {
theTable.rows[i].style.display = '';
}
showPage(); preText();
nextLink();
lastLink();
} //最后一页
function last() {
hideTable();
page = pageCount();
currentRow = pageSize * (page - 1);
for ( var i = currentRow; i<numberRowsInTable; i++ ) {
theTable.rows[i].style.display = '';
}
showPage(); preLink();
nextText();
firstLink();
} function hideTable() {
for ( var i = 0; i<numberRowsInTable; i++ ) {
theTable.rows[i].style.display = 'none';
}
} function showPage() {
pageNum.innerHTML = page;
} //总共页数
function pageCount() {
var count = 0;
if ( numberRowsInTable%pageSize != 0 ) count = 1;
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 = '1'; nextLink();
lastLink();
} hide();
</script> </body>
</html>
虽然东西不多，也很简单，但是学习不就是一点一滴的积累吗，我们最大的敌人就是懒惰，克服它，加油！
js是很博大精深的，很多时候我们看代码的时候会觉得我们会用了，可是自己动手敲代码的时候脑袋又是空空如也，归根结底还是代码敲得少，而且看的代码也少，许多逻辑还想不到，所以，还是要多多的动手，不要总是cv大法（我总是这样，快捷又方便，以至于我现在轮播广告都快不记得源码用的啥了）。
改掉坏习惯！
自我反思--table的简单数据分页的更多相关文章
- Jquyer table 中的数据分页
直接上代码,复制出来就可以使用 <!DOCTYPE html> <html> <head lang="en"> <meta charset ...
- SqlServer简单数据分页
手边开发的后端项目一直以来都用的.NET MVC框架,访问数据库使用其自带的EF CodeFirst模式,写存储过程的能力都快退化了 闲来无事,自己写了条分页存储过程,网上类似的文章多的是,这里只列了 ...
- salesforce 零基础开发入门学习（八）数据分页简单制作
本篇介绍通过使用VF自带标签和Apex实现简单的数据翻页功能. 代码上来之前首先简单介绍一下本篇用到的主要知识: 1.ApexPages命名空间 此命名空间下的类用于VF的控制. 主要的类包括但不限于 ...
- jquery ajax json简单的分页，模拟数据，没有封装，只显示原理
简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...
- js 从一个json拼接成另一个json，并做json数据分页table展示
先给数据: //原始json数据json = [{"id":"1","aid":"013","performa ...
- mysq大数据分页
mysql limit大数据量分页优化方法 Mysql的优化是非常重要的.其他最常用也最需要优化的就是limit.Mysql的limit给分页带来了极大的方便,但数据量一大的时候,limit的性能就急 ...
- 转：SQL SERVER数据库中实现快速的数据提取和数据分页
探讨如何在有着1000万条数据的MS SQL SERVER数据库中实现快速的数据提取和数据分页.以下代码说明了我们实例中数据库的“红头文件”一表的部分数据结构: CREATE TABLE [dbo]. ...
- ThinkPHP快速实现数据分页（前端/后端分离）
数据 分页 可能是web 编程里最常用到的功能之一.thinkphp 实现分页功能十分简洁.只需要定义 几个参数 就能搞定.当然,扩展也是十分方便的. 让我们现在就开始thinkphp的分页实现吧. ...
- SSM+PageHelper+jqGrid实现数据分页
前言 前几天自己写了一个分页功能,代码逻辑写的很乱今天发现jqGrid这个工具是真好用,故记录下来方便以后使用首先是PageHelper后台分页工具PageHelper的原理是基于拦截器实现的 具体流 ...
随机推荐
- Nutch源码阅读进程3---fetch
走了一遍Inject和Generate,基本了解了nutch在执行爬取前的一些前期预热工作,包括url的过滤.规则化.分值计算以及其与mapreduce的联系紧密性等,自我感觉nutch的整个流程是很 ...
- 学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
- 【Android】Android Studio 快速打开Github上的Demo
******* 注意 ******* Google 在15年12月2日发布了Android Studio 2.0,比起以前的版本速度提升了很多,所以强烈推荐各位朋友升级IDE! 1.修改:build. ...
- Ionic2学习笔记（4）：*号
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5544479.html 大家常常会在ionic2页面中见到*号 ...
- C# 获取 mp3文件信息
C# 获取 mp3文件信息[包括:文件大小.歌曲长度.歌手.专辑] 第一种方式:[代码已验证] // http://bbs.csdn.net/topics/390392612 string fil ...
- When using SqlDependency without providing an options value, SqlDependency.Start() must be called prior to execution of a command added to the SqlDependency instance.
在调试SignalR程序时,提示一个异常:When using SqlDependency without providing an options value, SqlDependency.Star ...
- 如何在Winform界面中设计图文并茂的界面
在Winform里面,很多控件元素都是标准的,如图标.按钮.工具栏等等,所以一般设计标准的Winform界面比较快捷,但是往往这样的界面相对单调一些,特别在界面控件比较少的情况下,我们往往需要加入一些 ...
- iOS学习笔记——基础控件（上）
本篇简单罗列一下一些常用的UI控件以及它们特有的属性,事件等等.由于是笔记,相比起来不会太详细 UIView 所有UI控件都继承于这个UIView,它所拥有的属性必是所有控件都拥有,这些属性都是控件最 ...
- LCA---Tarjan算法
本问题中Tarjan算法不需要设置栈和dfn,low标号,而是设置了并查集. 通过一次dfs遍历即可找出所有节点对的lca.将这样一次读取所有查询,计算一次后返回所有查询lca的算法称为离线算法 涉及 ...
- Tarjan算法---强联通分量
1.基础知识 在有向图G,如果两个顶点间至少存在一条路径,称两个顶点强连通(strongly connected).如果有向图G的每两个顶点都强连通,称G是一个强连通图.非强连通图有向图的极大强连通子 ...