自我反思--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的原理是基于拦截器实现的 具体流 ...
随机推荐
- Unity3D默认的快捷键
shift +方向键 向“向方向键前进” Windows系统Unity3D中的快捷键 组合键 键 功能 File 文件 Ctrl N New Scene 新建场景 Ctrl ...
- Asp.Net回车键触发Button的OnClick事件解决方案
在aspx页面有textbox文本框,还有三个button按钮.启用textbox的TextChanged事件和button的click事件. 问题: 现在在textbox文本框输入完数据按“回车”后 ...
- Prim算法(一)之 C语言详解
本章介绍普里姆算法.和以往一样,本文会先对普里姆算法的理论论知识进行介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现. 目录 1. 普里姆算法介绍 2. 普里姆算法图解 3. 普里 ...
- 你见过吗？9款超炫的复选框（Checkbox）效果
复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能.下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS ...
- （翻译）编写属于你的jQuery插件
Writing Your Own jQuery Plugins 原文地址:http://blog.teamtreehouse.com/writing-your-own-jquery-plugins j ...
- SwiftLint——Swift代码检查及自动格式化工具
某软不给力,正在做的UWP项目停工了.官方说法是要等到RS2发布新的VOIP架构,再看看是不是给某软面子.虽然Beta用户中发出了几点愤怒的声音,但是木有用.有用的只能是某软的Skype for bu ...
- VS2015 新Web项目(C#6)出现CS1617错误的解决
VS2015新增了对C#6的支持. 在新的Web项目模板中通过引入nuget包Microsoft.CodeDom.Providers.DotNetCompilerPlatform:1.0.0并在web ...
- 【转载】IE浏览器常见的9个css Bug以及解决办法
IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...
- Web API应用支持HTTPS的经验总结
在我前面介绍的WebAPI文章里面,介绍了WebAPI的架构设计方面的内容,其中提出了现在流行的WebAPI优先的路线,这种也是我们开发多应用(APP.微信.微网站.商城.以及Winform等方面的整 ...
- Android一个ListView列表之中插入两种不同的数据
http://www.cnblogs.com/roucheng/ Android一个ListView列表之中插入两种不同的数据 代码如下: public class ViewHolder{ Butto ...