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的编程艺术 ...

随机推荐

poj-----Ultra-QuickSort(离散化+树状数组)
Ultra-QuickSort Time Limit: 7000MS Memory Limit: 65536K Total Submissions: 38258 Accepted: 13784 ...
HDU----专题训练
Problem A Time Limit : 2000/1000ms (Java/Other) Memory Limit : 20000/10000K (Java/Other) Total Sub ...
一道SQL题
原题:大池子博客给定一个access_time表,它记录了用户每个月访问网站的次数,包括三个域:用户.时间.次数.注意表中可能包含用户在1月份的多条记录. 要求查询用户.月份.月累计.总共累计四项的 ...
PHP 大数自动转换为科学计数法
前段时间碰到一个很头疼的问题,就是大于12位的数字在PHP中,会自动转成科学计数法表示. 比如 1234567891234 显示为 1.23456789123E+12 , 最后只能在计算出大数之后, ...
Android开发简历书写的各个要点
对于我们这些自学成才的菜鸟来说,很多知识是欠缺的,比如如何写简历,今早上特意在网上学习了一下,写成学习笔记供大家参考. 篇幅,简历一般3页或者三页多一点是最好的,少了不好看,多了面试官不愿意看. 工作 ...
python练习笔记——完全数（1000以内的）
完全数(Perfect number),又称完美数或完备数,是一些特殊的自然数.它所有的真因子(即除了自身以外的约数)的和(即因子函数),恰好等于它本身.如果一个数恰好等于它的因子之和,则称该数为“完 ...
订阅mosquitto服务器状态各主题
mosquitto_sub -v -t \$SYS/broker/client MQTT客户端可以通过订阅位于$SYS层次下的主题来查看mosquitto服务器的状态信息.标记为Static的主题对于 ...
转 web前端性能分析--分析篇
通过具体实施后就可以获得第一手的web前端性能的数据了,然后每次新版本都跑,这就会获得大量的数据,为性能分析提供了基础的输入,同时应该还要综合使用多种工具去从不同的方向收集数据:比如showslow同 ...
OGG_GoldenGate数据控制进程Manager（案例）
2014-03-03 Created By BaoXinjian
Unix环境高级编程(八)进程关系
本章看后给人似懂非懂的感觉,主要是不知道实际当中如何去使用.通过前面几章的学习,每个进程都有一个父进程,当子进程终止时,父进程得到通知并取得子进程的退出状态.先将本章基本的知识点总结如下,日后再看时候 ...

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

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

随机推荐

热门专题