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

随机推荐

easyui panel自适应问题
项目中要用到easyui,使用也有几年时间了,刚开始使用还不错,毕竟只是简单的增删改查数据,不过到后面越来越觉得easyui不如extjs了,好多复杂一点的问题,easyui表现就力不从心了,题外话就 ...
python函数中把列表(list)当参数时的"入坑"与"出坑"
在Python函数中,传递的参数如果默认有一个为列表(list),那么就要注意了,此处有坑!! 入坑 def f(x,li=[]): for i in range(x): li.append(i*i ...
Java数据库表自动转化为PO对象
本程序简单实现了数据库内省,生成PO对象. 数据库内省有如下两种实现方式: 通过mysql元表通过desc table,show tables等命令 import java.io.IOExcepti ...
Java语言中的面向对象特性：封装、继承、多态，面向对象的基本思想（总结得不错）
Java语言中的面向对象特性(总结得不错) [课前思考] 1．什么是对象?什么是类?什么是包?什么是接口?什么是内部类? 2．面向对象编程的特性有哪三个?它们各自又有哪些特性? 3．你知道jav ...
@Html.Display @Html.LabelFor @Html.EditorFor Html.DisplayForModel Html.LabelForModel Html.EditorForModel
Form_Form Builder中的全局变量和程式变量（概念）
2014-12-20 Created By BaoXinjian
Linux内核(17) - 高效学习Linux驱动开发
这本<Linux内核修炼之道>已经开卖(网上的链接为: 卓越.当当.china-pub ),虽然是严肃文学,但为了保证流畅性,大部分文字我还都是斟词灼句,反复的念几遍才写上去的,尽量考虑到 ...
封ip对爬虫的影响
今天要聊的是封ip对爬虫的影响.我认为封ip能拒绝一部分网络请求,减轻服务器的压力,但是如果要是建立一个好的ip池,封对爬虫的影响不大. 爬取国内一个拍卖公司的网站,刚开始用多进程下载,每分钟能爬取 ...
bs-web项目时会经常打断点跟踪信息，可是循环时总是F10、F10的按，那么把所数据打印出来查看会更方便
bs-web项目时会经常打断点跟踪信息,可是循环时总是F10.F10的按,那么把所数据打印出来查看会更方便一.打断点的方式适合在有错误产生的时候用很好用. 二.可是在分析数据时不直观,得一个一个循环 ...
jenkins 发送邮件模板
jenkins 发送邮件模板 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

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

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

随机推荐

热门专题