js实现分页的几个源码，看完基本就懂了

第一种：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>addUser.html</title>

</script>

</head>

<body>

<h1>

显示有的用户界面

</h1>

<div

style="border: 1px red solid; margin-bottom: 100px; padding: 10px 10%">

<thead>

<tr>

<th>

</th>

<th>

名称

</th>

<th>

性别

</th>

<th>

邮箱

</th>

<th>

出生日期

</th>

<th>

操作

</th>

</tr>

</thead>

</tbody>

</table>

</div>

<form>

<tr>

<td>

用户名:

</td>

<td>

</td>

</tr>

<tr>

<td>

性别:

</td>

<td>

男

</option>

女

</option>

</select>

</td>

</tr>

<tr>

<td>

邮箱:

</td>

<td>

</td>

</tr>

<tr>

<td>

出生日期:

</td>

<td>

<input type=button value="点击看我"

onclick="showCalendar(this,document.all.bir)">

</td>

</tr>

</td>

</tr>

</td>

</tr>

</tbody>

</table>

</form>

</div>

</body>

</html>

window.onload = function() {

document.getElementByIdx_x("addu1").style.display = "none";

}

function addUser() {

var name = document.getElementByIdx_x("name").value;

var sex = document.getElementByIdx_x("sex").value;

var email = document.getElementByIdx_x("email").value;

var bir = document.getElementByIdx_x("bir").value;

//获取表格节点对象

var tusers = document.getElementByIdx_x("tusers");

//创建行

var tr1 = document.createElement_x("tr");

var cbk = document.createElement_x("td");

var tname = document.createElement_x("td");

var tsex = document.createElement_x("td");

var temail = document.createElement_x("td");

var tbir = document.createElement_x("td");

var toper = document.createElement_x("td");

var cbk1 = document.createElement_x("input");

cbk1.setAttribute("type", "checkbox");

cbk1.setAttribute("name", "chbk");

cbk.appendChild(cbk1);

tname.appendChild(document.createTextNode(name));

tsex.appendChild(document.createTextNode(sex));

temail.appendChild(document.createTextNode(email));

tbir.appendChild(document.createTextNode(bir));

var adelete = document.createElement_x("a");

var aupdate = document.createElement_x("a");

adelete.setAttribute("href", "#");

aupdate.setAttribute("href", "#");

adelete.appendChild(document.createTextNode("删除 |"));

aupdate.appendChild(document.createTextNode("修改"));

toper.appendChild(adelete);

toper.appendChild(aupdate)

//往行中添加

tr1.appendChild(cbk);

tr1.appendChild(tname);

tr1.appendChild(tsex);

tr1.appendChild(temail);

tr1.appendChild(tbir);

tr1.appendChild(toper);

var users = document.getElementByIdx_x("users");

users.appendChild(tr1);

tusers.appendChild(users);

//删除操作

adelete.onclick = function() {

users.removeChild(adelete.parentNode.parentNode);

}

//修改操作

aupdate.onclick = function() {

document.getElementByIdx_x("addu").style.display = "none";

document.getElementByIdx_x("addu1").style.display = "block";

var utr = aupdate.parentNode.parentNode;

var utrs = utr.childNodes;

document.getElementByIdx_x("name").value = utrs[1].innerHTML;

document.getElementByIdx_x("sex").value = utrs[2].innerHTML;

document.getElementByIdx_x("email").value = utrs[3].innerHTML;

document.getElementByIdx_x("bir").value = utrs[4].innerHTML;

var upUser = document.getElementByIdx_x("upduser");

upUser.onclick = function() {

utr.childNodes[1].innerHTML = document.getElementByIdx_x("name").value;

utr.childNodes[2].innerHTML = document.getElementByIdx_x("sex").value;

utr.childNodes[3].innerHTML = document.getElementByIdx_x("email").value

utr.childNodes[4].innerHTML = document.getElementByIdx_x("bir").value

document.getElementByIdx_x("addu1").style.display = "none";

document.getElementByIdx_x("addu").style.display = "block";

}

//当添加用户的时候调用分页技术

testPage()

}

//定义分页标签节点对象并创建

var indexPage = document.createElement_x("a");

var upPage = document.createElement_x("a");

var downPage = document.createElement_x("a");

var endPage = document.createElement_x("a");

var nowpage = 1;

//分页技术的实现

function testPage() {

var tbodyUsers = document.getElementByIdx_x("users");

var trUsers = tbodyUsers.getElementsByTagName_r("tr");

//获取总记录数

var countRecord = trUsers.length;

//每页显示的记录数

var PAGESIZE = 2;

//总页数

var countPage = (countRecord % PAGESIZE == 0 ? countRecord / PAGESIZE

: Math.ceil(countRecord / PAGESIZE));

//当前页信息

// =======>从那条记录开始 (nowpage-1)*PAGESIZE;

//var nowpage = countPage;

//获取创建分页标签的节点对象

var pages = document.getElementByIdx_x("pages");

//如果没有创建分页标签的节点则创建节点对象

if (!pages.hasChildNodes()) {

getPages(nowpage);

}

//当点击首页时的操作

indexPage.onclick = function() {

nowpage = 1;

//显示首页的记录

indexPageInfo(countRecord, trUsers);

}

//当点击上一页的操作

upPage.onclick = function() {

if (nowpage - 1 > 1) {

nowpage -= 1;

} else {

nowpage = 1;

indexPageInfo(countRecord, trUsers);

}

//显示上一页记录

var startindex = (nowpage - 1) * PAGESIZE;

alert(startindex + "====================++++++");

var endindex = startindex + PAGESIZE;

PageInfo(startindex, endindex, countRecord, trUsers)

}

//当点击下一页的操作

downPage.onclick = function() {

if (nowpage + 1 >= countPage) {

nowpage = countPage;

} else {

nowpage += 1;

}

alert(nowpage + "-----------------");

//显示上一页记录

var startindex = (nowpage - 1) * PAGESIZE;

alert(startindex + "====================++++++");

var endindex = startindex + PAGESIZE;

alert(startindex + "-----" + endindex + "---");

PageInfo(startindex, endindex, countRecord, trUsers)

}

//当点击最后一页的操作

endPage.onclick = function() {

nowpage = countPage;

if (nowpage > 1) {

var startindex = (nowpage-1)*PAGESIZE;

for ( var i = 0; i < countRecord; i++) {

if (i < startindex) {

trUsers[i].style.display = "none";

} else {

trUsers[i].style.display = "block";

}

第二种：

var totalRecordNum = <%=totalRecordNum%>;//总记录条数(从java程序中获取)

var currentPageNumber = 1;//当前页号

if(totalRecordNum==0)

{

currentPageNumber = 0;

}

var perPageRecordNum = 5;//每页记录条数(js中设置)

//计算总页数

var totalPageNumber = Math.ceil(totalRecordNum/perPageRecordNum);

var startShowPage ;//开始显示页记录号数

var endShowPage ;//结束显示页记录号数

//回车键和点击"GO"图片的效果一样

function keyDown() {

if(event.keyCode == 13){

goToPage();

}

//跳到指定页

function goToPage()

{

if(totalRecordNum != 0)

{

var pageNo = document.BillQueryForm.pageNum.value;

//校验页号

if((/[^0-9]/gi.test(pageNo)) | pageNo.length==0)

{

alert("页数必须为数字!");

return;

}

else

{

if((pageNo > totalPageNumber)|(pageNo<1))

{

alert("你所输入的页数超出范围！");

return;

}

//跳转到指定页

startShowPage = (pageNo-1)*perPageRecordNum;

endShowPage = pageNo*perPageRecordNum;

exeShowPage();

currentPageNumber = pageNo;

curPageNo.innerHTML = currentPageNumber;

totalPageNo.innerHTML = totalPageNumber;

}

//跳转到第一页

function goToFirstPage()

{

if(totalRecordNum != 0)

{

startShowPage = 0*perPageRecordNum;

endShowPage = 1*perPageRecordNum;

currentPageNumber = 1;

exeShowPage();

curPageNo.innerHTML = currentPageNumber;

totalPageNo.innerHTML = totalPageNumber;

}

function goToLastPage()

{

if(totalRecordNum != 0)

{

if(totalRecordNum%perPageRecordNum==0)//除尽

{

var tempVal = totalRecordNum/perPageRecordNum;

startShowPage = (tempVal-1)*perPageRecordNum;

endShowPage = tempVal*perPageRecordNum;

}

else

{

var tempVal = totalRecordNum%perPageRecordNum;//得到余数,就是最后一页要显示的记录条数

startShowPage = totalRecordNum-tempVal;

endShowPage = totalRecordNum;

}

currentPageNumber=totalPageNumber;

exeShowPage();

curPageNo.innerHTML = currentPageNumber;

totalPageNo.innerHTML = totalPageNumber;

}

function goToNextPage()

{

if(totalRecordNum != 0)

{

if(currentPageNumber< totalPageNumber)

{

currentPageNumber = Number(currentPageNumber)+1;

startShowPage = (currentPageNumber-1)*perPageRecordNum;

endShowPage = currentPageNumber*perPageRecordNum;

exeShowPage();

curPageNo.innerHTML = currentPageNumber;

totalPageNo.innerHTML = totalPageNumber;

}

else

{

alert("当前页已经是最后一页了!");

}

function goToBeforePage()

{

if(totalRecordNum != 0)

{

if(currentPageNumber>1)

{

currentPageNumber = currentPageNumber-1;

startShowPage = (currentPageNumber-1)*perPageRecordNum;

endShowPage = currentPageNumber*perPageRecordNum;

exeShowPage();

curPageNo.innerHTML = currentPageNumber;

totalPageNo.innerHTML = totalPageNumber;

}

else

{

alert("当前页已经是第一页了!");

}

function exeShowPage()

{

for(var i = 0; i<totalRecordNum;i++)

{

if ((i>=startShowPage)&&(i<endShowPage))

{

document.getElementByIdx_x("row"+i).style.display="";

}

else

{

document.getElementByIdx_x("row"+i).style.display="none";

}

function submitQuery()

{

var sForm = document.JXCardNumQueryForm;

if(sForm.elements["jxCardVO.jxcardid"].value==""){

alert("请输入您要查询的卡号！");

sForm.elements["jxCardVO.jxcardid"].focus();

return 0;

}

if(sForm.elements["jxCardVO.password"].value==""){

alert("请输入您要查询的密码！");

sForm.elements["jxCardVO.password"].focus();

return 0;

}

sForm.action="jxCardNumQuery.do?type=dxk";

sForm.submit();

return;

}

function cancelQuery()

{

window.history.go(-1);

}

function check()

{

if(document.all("card_no").value==""){

alert("卡号不能为空，请输入卡号！");

document.all("card_no").focus();

return false;

}

if(document.all("password").value==""){

alert("密码不能为空!");

document.all("password").focus();

return false;

}

return true;

}

//-->

</script>

<%if(totalRecordNum!=0) {%>

<tr>

当前第<span id="curPageNo"></span>页/总计<span id="totalPageNo"></span>页  

</td>

</tr>

<%}

else{%>

<tr>

</td>

</tr>

<%}%>

</logic:present>

</table>

</td>

</tr>

</table>

</html:form>

js实现分页的几个源码，看完基本就懂了的更多相关文章

Mybatis+SpringMVC实现分页查询（附源码）
Maven+Mybatis+Spring+SpringMVC实现分页查询(附源码) 一.项目搭建关于项目搭建,小宝鸽以前写过一篇Spirng+SpringMVC+Maven+Mybatis+MySQ ...
从Chrome源码看JS Array的实现
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } .crayon-line spa ...
【 js 模块加载】【源码学习】深入学习模块化加载（node.js 模块源码）
文章提纲: 第一部分:介绍模块规范及之间区别第二部分:以 node.js 实现模块化规范源码,深入学习. 一.模块规范说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须 ...
从Chrome源码看浏览器的事件机制
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } .crayon-line spa ...
从微信小程序开发者工具源码看实现原理（一）- - 小程序架构设计
使用微信小程序开发已经很长时间了,对小程序开发已经相当熟练了:但是作为一名对技术有追求的前端开发,仅仅熟练掌握小程序的开发感觉还是不够的,我们应该更进一步的去理解其背后实现的原理以及对应的考量,这可能 ...
从微信小程序开发者工具源码看实现原理（四）- - 自适应布局
从前面从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计可以知道,小程序大部分是通过web技术进行渲染的,也就是最终通过浏览器的dom tree + cssom来生成渲染树:既然最终是通 ...
【Vue2.x笔记3】从源码看watch对象
初始化 function initWatch (vm: Component, watch: Object) { for (const key in watch) { const handler = w ...
从源码看Azkaban作业流下发过程
上一篇零散地罗列了看源码时记录的一些类的信息,这篇完整介绍一个作业流在Azkaban中的执行过程,希望可以帮助刚刚接手Azkaban相关工作的开发.测试. 一.Azkaban简介 Azkaban作为开 ...
解密随机数生成器（二）——从java源码看线性同余算法
Random Java中的Random类生成的是伪随机数,使用的是48-bit的种子,然后调用一个linear congruential formula线性同余方程(Donald Knuth的编程艺术 ...

随机推荐

C# 生成 DataMatrix 格式的二维码
该文主要是利用OnBarcode.dll 生成 DataMatrix 格式的二维码的一些简单方法和操作技巧.关于QrBarcode的二维码比较常见和简单,网上有很多资源. 1.附件为dll 2.利用上 ...
从gentoo回归Arch,上组图
Arch一直在我笔记本里边,只是玩gentoo时我不进Arch了,现在回归Arch,升级到了最新,用上了gentoo的最新的2.6.31内核(自己配置,无initrd),引导程序用的grub4dos: ...
linux 硬件设备文件名
linux上创建PV/VG/LV
LVM的整体思路是: 首先创建PV-->然后创建VG并将多个PV加到VG里-->然后创建LV-->格式化分区-->mount分区 1.创建PV pvcreate /dev/sd ...
OGG_GoldenGate数据库配置DDL同步（案例）
2014-03-08 Created By BaoXinjian
[Jobdu] 题目1528：最长回文子串
题目描述: 回文串就是一个正读和反读都一样的字符串,比如“level”或者“noon”等等就是回文串.回文子串,顾名思义,即字符串中满足回文性质的子串.给出一个只由小写英文字符a,b,c...x,y, ...
已有iptables表的查看
查看已有iptables表 iptables -L -nv --line-number-L是--list的简写,作用是列出规则-n是ip以数字方式显示,有的会用域名方式显示.-v是显示详细信息 v=v ...
【Android】Java堆栈溢出的解决办法
分类:C#.Android.VS2015: 创建日期:2016-03-18 随着项目中添加的.jar和.so文件越来越多,编译MyDemos项目时,可能会出现Java堆栈溢出的错误,提示让增加Java ...
Java8 新特性简介
Java8是2014年发布的,至今也已经有快三年的时间了,之前虽然有学习过,但是学的比较零散,不成系统,而且也没有覆盖到Java8所有的特性. 由于公司已经使用了JDK1.8,所以工作中能使用Java ...
SourceInsight-查看java中接口对应的实现类
1.双击选中需要查看的接口名称,然后右击选择“Show in Relation Window” 2.然后在右侧会弹出一个Relation的窗口如果没有列出对应的实现类,可以在接口名上再次右击,依次选 ...

js实现分页的几个源码，看完基本就懂了

js实现分页的几个源码，看完基本就懂了的更多相关文章

随机推荐

热门专题