js分页实例
案例1
1.js_pageusers.html
<!DOCTYPE html> <html>
<head>
<title>js_pageusers.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="pageuser.js"></script>
</head> <body>
<div id="one" align="center">
<div>
用户名: <input type="text" id="userName" />
性别： <input type="text" id="userSex" /> 职业： <input type="text" id="userRole" /> <br /> <br />
<input type="button" id="addUsers" value="添加用户" />
<input type="button" id="updateUsers" value="更新用户" />
</div>
<br /> <br />
<div>
<table border="1px" cellpadding="" cellspacing="" width="500px;">
<thead>
<th>用户名</th>
<th>性别</th>
<th>职业</th>
</thead>
<tbody id="showUsers"></tbody>
</table> <div>
<input type="button" id="firstPage" value="首页" /> <input
type="button" id="backPage" value="上一页" /> <input type="button"
id="nextPage" value="下一页" /> <input type="button" id="lastPage"
value="末页" /> <span id="msg"></span>
</div>
</div>
</div>
</body> </html>
2.pageuser.js
function setPage(){
var pagesize = ;//每页显示的记录数
var recondsize = ;//总记录数
var countpage = ;//总页数
var nowpage= ;
var users = new Array();//存放所有的记录
var start = ; //保存当前页开始的记录
var end = ;//保存当前页结束的记录
var domUserName = $("userName");
var domUserSex = $("userSex");
var domUserRole = $("userRole");
var domshowUsers = $("showUsers");
var addBtn = $("addUsers");
//为按钮注册事件
addBtn.onclick = function() {
//创建user对象
var user = new User(domUserName.value, domUserSex.value,
domUserRole.value);
//把user对象存放数组中
users.push(user);
recondsize = users.length; //得出总记录数
//计算出总页数
countpage = recondsize % pagesize == ? recondsize / pagesize : Math
.ceil(recondsize / pagesize);
if (recondsize > pagesize) { //当总记录大于pagezie 思路 从后往前数3个数
start = recondsize-pagesize;
end=recondsize;
}else{ // pagesize start =1;
start=;
end=recondsize; //end=实际的个数 就是 recondsize
}
//调用显示user的方法
showUser(users,start,end,recondsize,countpage,domshowUsers);
}
//获取分页相关的按钮
var firstPage = $("firstPage");
var backPage = $("backPage");
var nextPage = $("nextPage");
var lastPage = $("lastPage");
firstPage.onclick = function() {
nowpage = ;
if (recondsize<= pagesize && recondsize > ) {
start = ;
end = recondsize;
}else{
start=;
end=pagesize;
}
showUser(users,start,end,recondsize,countpage,domshowUsers);
}
backPage.onclick = function() {
nowpage = nowpage-;//重新赋值
if(nowpage<=){
nowpage=;
}
if (recondsize <= pagesize && recondsize > ) {
start = ;
end = recondsize;
}else{
start=(nowpage-)*pagesize;
end = (nowpage-)*pagesize+pagesize;
}
showUser(users,start,end,recondsize,countpage,domshowUsers);
}
nextPage.onclick = function() {
nowpage = nowpage+;//重新赋值
if(nowpage>=countpage){
nowpage=countpage;
}
if (recondsize <= pagesize && recondsize > ) {
start = ;
end = recondsize;
}else{
start=(nowpage-)*pagesize;
if((nowpage-)*pagesize+pagesize>=recondsize){
end = recondsize;
}else{
end =(nowpage-)*pagesize+pagesize;
}
}
showUser(users,start,end,recondsize,countpage,domshowUsers);
}
lastPage.onclick = function() {
nowpage = countpage;//重新赋值
if (recondsize <= pagesize && recondsize > ) {
start = ;
end = recondsize;
}else{
start=(nowpage-)*pagesize;
end = recondsize;
}
showUser(users,start,end,recondsize,countpage,domshowUsers);
}
}
//创建一个Function函数 函数是保存User对象数据的
function User(name, sex, role) {
this.name = name;
this.sex = sex;
this.role = role;
}
function $(id) {
return document.getElementById(id);
}
function showUser(users,start,end,recondsize,countpage,domshowUsers){
//清空数据
for ( var jj = ; jj < domshowUsers.childNodes.length;) {
domshowUsers.removeChild(domshowUsers.childNodes[jj]);
}
//for循环添加的
for(var i=start;i<end;i++){
var user = users[i];//考虑
//创建一行
var tr = document.createElement("tr");
//创建列
var td1 = document.createElement("td");
//创建文本节点
var td1TextNode = document.createTextNode(user.name);
//文本节点添加到td中
td1.appendChild(td1TextNode);
//创建列
var td2 = document.createElement("td");
//创建文本节点
var td2TextNode = document.createTextNode(user.sex);
//文本节点添加到td中
td2.appendChild(td2TextNode);
//创建列
var td3 = document.createElement("td");
//创建文本节点
var td3TextNode = document.createTextNode(user.role);
//文本节点添加到td中
td3.appendChild(td3TextNode);
//把列添加到行中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
//把行添加到tbody中
if(domshowUsers.hasChildNodes()){
domshowUsers.insertBefore(tr,domshowUsers.firstChild);//再最后一个数据之前添加数据
}else{
domshowUsers.appendChild(tr);//添加到末尾
}
}
document.getElementById("msg").innerHTML = "总共：{" + recondsize
+ "}条记录,共{" + countpage + "}页";
}
案例2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>js分页技术</title>
</head>
<body>
<table width="" border="" cellpadding="" cellspacing=""
bgcolor="#999999">
<tbody id="table2">
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<span id="spanFirst">第一页</span>
<span id="spanPre">上一页</span>
<span id="spanNext">下一页</span>
<span id="spanLast">最后一页</span> 第
<span id="spanPageNum"></span>页/共
<span id="spanTotalPage"></span>页
</body>
</html>
<script>
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 = ;
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 = '';//currentRow ~ maxRow 内显示出来
}
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>
js分页实例的更多相关文章
- angular.js分页代码的实例
对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...
- 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...
- Jsp分页实例---真分页
网页的分页功能的实现比较简单,实现方法也多种多样. 今天总结一个简单的Jsp真分页实例. 首先,提到分页就要先明确一个概念,何为真分页何谓假分页. 假分页:一次性从数据库读出表的所有数据一次性的返回给 ...
- Thinkphp+Ajax带关键词搜索列表无刷新分页实例
Thinkphp+Ajax带关键词搜索列表无刷新分页实例,两个查询条件,分页和搜索关键字,懂的朋友还可以添加其他分页参数. 搜索#keyword和加载内容区域#ajax_lists <input ...
- java：（json，ajax，path，Oracle的分页实例，Filter拦截器）
1.json: <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...
- js分页小结
今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...
- 自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
- RDIFramework.NET 中多表关联查询分页实例
RDIFramework.NET 中多表关联查询分页实例 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,给用户和开发者最佳的.Net框架部署方案.该框架以SOA范式作为 ...
- jsp、js分页功能的简单总结
一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...
随机推荐
- 函数式编程编程即高阶函数+monad
高阶函数负责数据的单次映射: monad负责数据处理流的串联,并使得串联函数具有相同的形式. 同时moand负责基础类型和高阶类型间的转换.
- PHP安全过滤函数
在PHP中,有些很有用的函数开源非常方便的防止你的网站遭受各种攻击,例如SQL注入攻击,XSS(Cross Site Scripting:跨站脚本)攻击等. 1. mysql_real_escap ...
- leetcode 200. Number of Islands 、694 Number of Distinct Islands 、695. Max Area of Island 、130. Surrounded Regions
两种方式处理已经访问过的节点:一种是用visited存储已经访问过的1:另一种是通过改变原始数值的值,比如将1改成-1,这样小于等于0的都会停止. Number of Islands 用了第一种方式, ...
- shiro实战系列(十一)之Caching
Shiro 开发团队明白在许多应用程序中性能是至关重要的.Caching 是从第一天开始第一个建立在 Shiro 中的一流功 能,以确保安全操作保持尽可能的快. 然而,Caching 作为一个概念 ...
- Kafka设计解析（二十一）关于Kafka幂等producer的讨论
转载自 huxihx,原文链接 关于Kafka幂等producer的讨论 众所周知,Kafka 0.11.0.0版本正式支持精确一次处理语义(exactly once semantics,下称EOS) ...
- HDU 3342 Legal or Not（有向图判环 拓扑排序）
Legal or Not Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- setInterval() 方法应用
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 s ...
- Dsu on Tree
这个属于一种技巧,可以解决类似于子树询问无修改可离线的问题,一些点分治的问题也可以用Dsu on Tree解决,并且常数较小,代码复杂度低,很具有可写性. 整体上的意思就是继承重儿子的信息,暴力修改轻 ...
- 蜻蜓fm面试
一面: 面试官首先看简历上写了在腾讯的实习,然后就探讨了半天,各种虚拟化的技术.... 说完之后,估计都半小时过去了,然后就又说了一下你用什么语言,你做的东西都比较偏底层呢,然后你对工作有什么要求吗? ...
- Microsoft Tech Summit 2017
Microsoft Tech Summit 2017 时间:2017.10.31-2017.11.3 地点:北京国际饭店会议中心