自我反思--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的原理是基于拦截器实现的 具体流 ...
随机推荐
- nodejs Error: request entity too large解决方案
错误如图: 解决方案: app.js添加 var bodyParser = require('body-parser'); app.use(bodyParser.json({limit: '50mb' ...
- [OpenCV] Samples 09: image
根据需求,转化为不同的颜色格式,split后处理各自通道. plImage <==> Mat 格式转换 Mat --> plImage 简单写法: IplImage copy = m ...
- Android基于mAppWidget实现手绘地图（十五）–如何控制放大缩小
一般来说,可以使用以下几种方式来控制地图的放大/缩小 : 1. 使用控件底部的缩放按钮 2.双击控件 3.pinch手势 4.物理按键 :I键标识缩小 :O键表示放大.(只有设备具有物理按键才行) ...
- Linux - 日志文件
Linux日志文件绝大多数存放在/var/log目录,其中一些日志文件由应用程序创建,其他的则通过syslog来创建. Linux系统日志文件通过syslog守护程序在syslog套接字/dev/lo ...
- 使用 CSS3 & jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
- [python]进阶学习之阅读代码
起因 最近在公司的任务是写一些简单的运营工具,因为是很小的工具,所以就用了github上面的一个开源项目flask-admin,可以省去很多的事情. 但是,这个开源项目是个人维护的项目,所以文档相对简 ...
- 索引深入浅出(4/10)：非聚集索引的B树结构在聚集表
一个表只能有一个聚集索引,数据行以此聚集索引的顺序进行存储,一个表却能有多个非聚集索引.我们已经讨论了聚集索引的结构,这篇我们会看下非聚集索引结构. 非聚集索引的逻辑呈现 简单来说,非聚集索引是表的子 ...
- python生成随机密码
有时候我们会想生成一个随机密码,这样我们通过Python中的一些随机方法,就可生成我们任意长度和复杂度的密码,代码如下: # -*- coding=utf-8 -*- import random im ...
- C#抽象类
抽象类使用abstract修饰符声明: 不能创建抽象类的实例: 抽象类只能用作其他类的基类: 抽象类中可以包含抽象成员和普通的非抽象成员: 抽象类自己可以派生自另外一个抽象类: 任何派生自抽象类的[类 ...
- canvas导出图片方法总结
html代码 <canvas id="canvas" width="100" height="100" ></canvas ...