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="点击看我"

οnclick="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>

若转载请注明出处！若有疑问，请回复交流！