自我反思--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的原理是基于拦截器实现的 具体流 ...
随机推荐
- [c++] STL = Standard Template Library
How many people give up, because of YOU. Continue... 先实践,最后需要总结. 1. 数据流中的数据按照一定的格式<T>提取 ------ ...
- Unity3D UNet网络组件详解
UNet常见概念简介 Spawn:简单来说,把服务器上的GameObject,根据上面的NetworkIdentity组件找到对应监视连接,在监视连接里生成相应的GameObject. Command ...
- js让程序暂停一段时间再执行
function sleep(d){ for(var t = Date.now();Date.now() - t <= d;); } sleep(5000); //当前方法暂停5秒
- HTML5移动Web开发（四）——移动设计
桌面网站的设计趋势是固定布局(fixed layout)或流体布局(fluid layout),而在移动网站中我们应该始终使用流体布局,它可以使你的网站适应不同的设备尺寸. 固定宽度布局(Fixed ...
- td中绝对定位div的垂直居中问题
一.需求 典型的注册页面设计一般是一个三列多行的表格,左列为表单项label,中列为文本框,右列为填写说明和验证提示.如下图 因为整个表单的视觉重心在左中两列,所以在考虑表单整体相对页面水平居中和注册 ...
- AndroidManifest.xml配置文件
AndroidManifest.xml启动文件 主activity: <activity android:name="com.example.android01.MainActivit ...
- TCP/IP详解学习笔记(13)-TCP坚持定时器，TCP保活定时器
TCP一共有四个主要的定时器,前面已经讲到了一个--超时定时器--是TCP里面最复杂的一个,另外的三个是: 坚持定时器 保活定时器 2MSL定时器 其中坚持定时器用于防止通告窗口为0以后双方互相等待死 ...
- NPOI导入导出EXCEL通用类，供参考，可直接使用在WinForm项目中
以下是NPOI导入导出EXCEL通用类,是在别人的代码上进行优化的,兼容xls与xlsx文件格式,供参考,可直接使用在WinForm项目中,由于XSSFWorkbook类型的Write方法限制,Wri ...
- 音频文件解析(二)：WAV格式文件波形绘制
解析WAV头部信息后,接下来就可以根据相关参数和DATA块数据绘制波形. 1.重新编码(转换为8bits,单声道数据) Public Function GetFormatData(ByVal pDat ...
- Git 查看文件的历史
用惯了tfs,刚一接触git感觉很不顺手,特别是一些很基本的操作,用起来都怪怪的(可能是不习惯命令行的原因吧).下面把查看文件历史的用例小结一下. 查看某个文件的修改历史 在git中查看历史的命令主要 ...