javascript分頁

你好，你看下是不是你要的代碼呢，我還擴充了t[26]="利用JavaScript實現網頁分頁技術25|25.htm|2002.6.8|楓情"

站在用戶的角度思考問題，與客戶深入溝通，找到淄博網站設計與淄博網站推廣的解決方案，憑借多年的經驗，讓設計與互聯網技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網站設計制作、成都網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣、主機域名、網站空間、企業(yè)郵箱。業(yè)務覆蓋淄博地區(qū)。

t[27]="利用JavaScript實現網頁分頁技術26|26.htm|2002.6.8|楓情"

html

script language="JavaScript"

!--

var p=8

var t=new Array()

t[0]="利用JavaScript實現網頁分頁技術1|01.htm|2002.6.8|楓情"

t[1]="利用JavaScript實現網頁分頁技術2|02.htm|2002.6.8|楓情"

t[2]="利用JavaScript實現網頁分頁技術3|03.htm|2002.6.8|楓情"

t[3]="利用JavaScript實現網頁分頁技術4|04.htm|2002.6.8|楓情"

t[4]="利用JavaScript實現網頁分頁技術5|05.htm|2002.6.8|楓情"

t[5]="利用JavaScript實現網頁分頁技術6|06.htm|2002.6.8|楓情"

t[6]="利用JavaScript實現網頁分頁技術7|07.htm|2002.6.8|楓情"

t[7]="利用JavaScript實現網頁分頁技術8|08.htm|2002.6.8|楓情"

t[8]="利用JavaScript實現網頁分頁技術9|09.htm|2002.6.8|楓情"

t[9]="利用JavaScript實現網頁分頁技術10|10.htm|2002.6.8|楓情"

t[10]="利用JavaScript實現網頁分頁技術11|11.htm|2002.6.8|楓情"

t[11]="利用JavaScript實現網頁分頁技術12|12.htm|2002.6.8|楓情"

t[12]="利用JavaScript實現網頁分頁技術13|13.htm|2002.6.8|楓情"

t[13]="利用JavaScript實現網頁分頁技術14|14.htm|2002.6.8|楓情"

t[14]="利用JavaScript實現網頁分頁技術15|15.htm|2002.6.8|楓情"

t[15]="利用JavaScript實現網頁分頁技術16|16.htm|2002.6.8|楓情"

t[16]="利用JavaScript實現網頁分頁技術17|17.htm|2002.6.8|楓情"

t[17]="利用JavaScript實現網頁分頁技術18|18.htm|2002.6.8|楓情"

t[18]="利用JavaScript實現網頁分頁技術19|19.htm|2002.6.8|楓情"

t[19]="利用JavaScript實現網頁分頁技術20|20.htm|2002.6.8|楓情"

t[20]="利用JavaScript實現網頁分頁技術21|21.htm|2002.6.8|楓情"

t[21]="利用JavaScript實現網頁分頁技術22|22.htm|2002.6.8|楓情"

t[22]="利用JavaScript實現網頁分頁技術23|23.htm|2002.6.8|楓情"

t[23]="利用JavaScript實現網頁分頁技術24|24.htm|2002.6.8|楓情"

t[24]="利用JavaScript實現網頁分頁技術25|25.htm|2002.6.8|楓情"

t[25]="利用JavaScript實現網頁分頁技術26|26.htm|2002.6.8|楓情"

t[26]="利用JavaScript實現網頁分頁技術25|25.htm|2002.6.8|楓情"

t[27]="利用JavaScript實現網頁分頁技術26|26.htm|2002.6.8|楓情"

var totalPage=Math.ceil(t.length/p)

var curPage=1;

var str=window.location.toString();

if (str.indexOf("?")==-1)

str=str+"?1"

r=str.split("?")

curPage=parseInt(r[1],10);

w();

if (curPage1)

document.write("a href="+r[0]+"?"+(curPage-1)+"上一頁/a");

else

document.write("上一頁");

document.write(" 第"+(t.length-(curPage-1)*p)+"至");

if (curPagetotalPage)

document.write(t.length-(curPage)*p+1);

else

document.write("1");

document.write("條，總共有"+t.length+"條信息! ");

if (curPagetotalPage)

document.write("a href="+r[0]+"?"+(curPage+1)+"下一頁/a");

else

document.write("下一頁");

function w()

{

var c=new Array()

if (curPage=totalPage){

b=t.length;

s=(totalPage-1)*p;

}

else{

b=curPage*p;

s=(curPage-1)*p;

}

for (i=s;ib;i++)

{

try{

c=t[i].split("|")

document.write(" "+(t.length-i)+"、文 章 標 題a href="+c[1]+" target=_blank"+c[0]+"/a時間"+c[2]+"作者"+c[3]

+"br");

}catch(e){alert("i:"+i+",b:"+b+",s:"+s)}

}

}

// --

/script

/html

仔細理解它的內涵，我用//標出了我修改的地方，對比下原來的代碼，看看它的思路吧，其實不難。

再給你推薦個網站，

若有問題，請到留言，只要在能力范圍之內，肯定幫助。

論壇：

js的分頁原理以及實現步驟是什么？

主要是借鑒了網上一個例子，修改了一些小地方，前端分頁的技巧，表格的數據是已經寫好了，可以前端渲染表格然后再分頁，都是可以的。

其實分頁最關鍵是這兩句：

var startRow = (currentPage - 1) * pageSize+1;? //currentPage 為當前頁，pageSize為每頁顯示的數據量

var endRow = currentPage * pageSize;

找到我們需要顯示的行的范圍（starRow~endRow）

ps:這里在跳轉的時候遇到了一個小BUG，就是獲取到的select的value值是string類型的，比如獲取到了1，然后你想再加1的時候就會變成"11" ?而不是我們想要的"2"，所以這里需要用parseInt( )來轉換一下，小細節(jié)需要注意呀！??！

效果圖：

[javascript] view plain copy print?

!doctype?html

html

head

meta?charset='utf-8'

style?type="text/css"

a{

text-decoration:?none;

}

.table2{

border:#C8C8C8?solid;

border-width:1px?0px?0px?1px;

background:?#F3F0F0;

margin-top:25px;

}

.td0{

border:#C8C8C8?solid;

border-width:0?0?1px?0;

}

.td2{

border:#C8C8C8?solid;

border-width:0?1px?1px?0?;

}

.barcon?{

width:?1000px;

margin:?0?auto;

text-align:?center;

}

.barcon1?{

font-size:?17px;

float:?left;

margin-top:?20px;

}

.barcon2?{

float:?right;

}

.barcon2?ul?{

margin:?20px?0;

padding-left:?0;

list-style:?none;

text-align:?center;

}

.barcon2?li?{

display:?inline;

}

.barcon2?a?{

font-size:?16px;

font-weight:?normal;

display:?inline-block;

padding:?5px;

padding-top:?0;

color:?black;

border:?1px?solid?#ddd;

background-color:?#fff;

}

.barcon2?a:hover{

background-color:?#eee;

}

.ban?{

opacity:?.4;

}

/style

/head

body

table?width="950"?cellpadding="0"?cellspacing="0"?class="table2"?align="center"

thead

tr

td?colspan="3"?height="33"?class="td0"?/td

td?align="center"?class="td2"a?href="###"添加用戶/a/td

/tr

tr?align="center"

th?width="150"?height="33"?class="td2"序號/th

th?width="300"?class="td2"用戶名/th

th?width="250"?class="td2"權限/th

th?width="250"?class="td2"操作/th

/tr

/thead

tbody?id="adminTbody"

tr?align="center"

td?class="td2"?height="33"?width="150"1/td

td?class="td2"?admin/td

td?class="td2"?管理員/td

td?class="td2"?a?href="###"修改/a/td

/tr

/tbody

/table

div?id="barcon"?class="barcon"?

div?id="barcon1"?class="barcon1"/div

div?id="barcon2"?class="barcon2"

ul

lia?href="###"?id="firstPage"首頁/a/li

lia?href="###"?id="prePage"上一頁/a/li

lia?href="###"?id="nextPage"下一頁/a/li

lia?href="###"?id="lastPage"尾頁/a/li

liselect?id="jumpWhere"

/select/li

lia?href="###"?id="jumpPage"?onclick="jumpPage()"跳轉/a/li

/ul

/div

/div

script?src="jquery.js"/script

script

/*動態(tài)生成用戶函數

num為生成的用戶數量

*/

function?dynamicAddUser(num){

for(var?i=1;i=num;i++)

{

var?trNode=document.createElement("tr");

$(trNode).attr("align","center");

//序號

var?tdNodeNum=document.createElement("td");

$(tdNodeNum).html(i+1);

tdNodeNum.style.width?=?"150px";

tdNodeNum.style.height?=?"33px";

tdNodeNum.className?=?"td2";

//用戶名

var?tdNodeName=document.createElement("td");

$(tdNodeName).html("lzj"+i);

tdNodeName.style.width?=?"300px";

tdNodeName.className?=?"td2";

//權限

var?tdNodePri=document.createElement("td");

tdNodePri.style.width?=?"250px";

tdNodePri.className?=?"td2";

var?priText=document.createElement("span");

$(priText).css({"display":"inline-block","text-align":"center"});

$(priText).text("普通用戶");

tdNodePri.appendChild(priText);

//操作

var?tdNodeOper?=?document.createElement("td");

tdNodeOper.style.width?=?"170px";

tdNodeOper.className?=?"td2";

var?editA?=?document.createElement("a");

$(editA).attr("href",?"###").text("編輯");

$(editA).css({?display:?"inline-block"?});

tdNodeOper.appendChild(editA);

trNode.appendChild(tdNodeNum);

trNode.appendChild(tdNodeName);

trNode.appendChild(tdNodePri);

trNode.appendChild(tdNodeOper);

$("#adminTbody")[0].appendChild(trNode);

}

}

$(function(){

dynamicAddUser(80);

goPage(1,10);

var?tempOption="";

for(var?i=1;i=totalPage;i++)

{

tempOption+='option?value='+i+''+i+'/option'

}

$("#jumpWhere").html(tempOption);

})

/**

*?分頁函數

*?pno--頁數

*?psize--每頁顯示記錄數

*?分頁部分是從真實數據行開始，因而存在加減某個常數，以確定真正的記錄數

*?純js分頁實質是數據行全部加載，通過是否顯示屬性完成分頁功能

**/

var?pageSize=0;//每頁顯示行數

var?currentPage_=1;//當前頁全局變量，用于跳轉時判斷是否在相同頁，在就不跳，否則跳轉。

var?totalPage;//總頁數

function?goPage(pno,psize){

var?itable?=?document.getElementById("adminTbody");

var?num?=?itable.rows.length;//表格所有行數(所有記錄數)

pageSize?=?psize;//每頁顯示行數

//總共分幾頁

if(num/pageSize??parseInt(num/pageSize)){

totalPage=parseInt(num/pageSize)+1;

}else{

totalPage=parseInt(num/pageSize);

}

var?currentPage?=?pno;//當前頁數

currentPage_=currentPage;

var?startRow?=?(currentPage?-?1)?*?pageSize+1;

var?endRow?=?currentPage?*?pageSize;

endRow?=?(endRow??num)??num?:?endRow;

//遍歷顯示數據實現分頁

/*for(var?i=1;i(num+1);i++){

var?irow?=?itable.rows[i-1];

if(i=startRow??i=endRow){

irow.style.display?=?"";

}else{

irow.style.display?=?"none";

}

}*/

$("#adminTbody?tr").hide();

for(var?i=startRow-1;iendRow;i++)

{

$("#adminTbody?tr").eq(i).show();

}

var?tempStr?=?"共"+num+"條記錄?分"+totalPage+"頁?當前第"+currentPage+"頁";

document.getElementById("barcon1").innerHTML?=?tempStr;

if(currentPage1){

$("#firstPage").on("click",function(){

goPage(1,psize);

}).removeClass("ban");

$("#prePage").on("click",function(){

goPage(currentPage-1,psize);

}).removeClass("ban");

}else{

$("#firstPage").off("click").addClass("ban");

$("#prePage").off("click").addClass("ban");

}

if(currentPagetotalPage){

$("#nextPage").on("click",function(){

goPage(currentPage+1,psize);

}).removeClass("ban")

$("#lastPage").on("click",function(){

goPage(totalPage,psize);

}).removeClass("ban")

}else{

$("#nextPage").off("click").addClass("ban");

$("#lastPage").off("click").addClass("ban");

}

$("#jumpWhere").val(currentPage);

}

function?jumpPage()

{

var?num=parseInt($("#jumpWhere").val());

if(num!=currentPage_)

{

goPage(num,pageSize);

}

}

/script

/body

/html

javascript如何實現div分頁呢？

主要思路：就是點擊當前頁時，它自己顯示，其它的都隱藏；

下面是簡單的代碼實現：

style????

input.active?{background:yellow;}????

div?{width:200px;?height:200px;?border:1px?solid?red;?display:none;}????

div.active?{display:block;}????

/style????

script????

window.onload=function(){????

var?aBtn?=?document.getElementsByTagName('input');????

var?aDiv?=?document.getElementsByTagName('div');????

for(var?i?=0;?iaBtn.length;i++)????

{????

(function(index){????//因為要存儲點擊的下標，所以需要做一個參數引入。學名叫'自執(zhí)行匿名函數'。

aBtn[i].onclick=function(){???

//這個for循環(huán)的作用是將所以的都隱藏。?

for(var?i?=0;?iaBtn.length;i++)????

{????

aBtn[i].className='';????

aDiv[i].className='';????

}????

//這是將當前點擊的顯示。

this.className='active';????

aDiv[index].className='active';????

};????

})(i);????

}????

};????

/script????

/head????

body????

input?type="button"?value="111"?class='active'?/????

input?type="button"?value="222"?/????

input?type="button"?value="333"?/????

div?class="active"11111111111/div????

div22222222222/div????

div33333333333/div????

/body

如何用JS將數據在頁面上分頁顯示出來

在servlet的service()方法中只需進行如下操作：

PageControl

pageCtl

=

yourBusinessObject.listData(req.getParameter("jumpPage"));

req.setAttribute("pageCtl",pageCtl);

說明：yourBusinessObject封裝了商業(yè)邏輯，是位于Business

Logic

Layer中的一個對象，運用OOAD的方法，封裝商業(yè)對象，在Persistent

Layer之上組建堅實的Business

Logic

Layer同樣是構建大型電子商務架構的關鍵所在。本文的關注點只是分頁處理，暫不詳細論述.

在每個想要實現翻頁顯示數據的jsp頁面中，我們的工作也很簡單,其代碼是公式化的：

jsp:useBean

id="pageCtl"

class="yourpackage.PageControl"

scope="request"/jsp:useBean

%if(pageCtl.maxPage!=1)){%

form

name="PageForm"

action="/servlet/yourpackage.yourservlet"

method="post"

%@

include

file="/yourpath/pageman.jsp"%

/form

%}%

說明：

if(pageCtl.maxPage!=1)實現了這樣一個邏輯：如果所取得數據不足一頁,那么就不用進行翻頁顯示。

我們注意到%@

include

file="/yourpath/pageman.jsp"%這使得真正的翻頁部分完全得到了重用.

那么pageman.jsp到底做了些什么呢？它實現了經常做翻頁處理的人耳熟能詳的邏輯?

（A）第一頁時不能再向前翻；?

（B）最后一頁時不能再向后翻；?

同時能夠進行頁面任意跳轉，具體代碼如下：

每頁%=pageCtl.rowsPerPage%行

共%=pageCtl.maxRowCount%行

第%=pageCtl.curPage%頁

共%=pageCtl.maxPage%頁

BR

%if(pageCtl.curPage==1){

out.print("

首頁

上一頁");

}else{

%

A

HREF="javascript:gotoPage(1)"首頁/A

A

HREF="javascript:gotoPage(%=pageCtl.curPage-1%)"上一頁/A

%}%

%if(pageCtl.curPage==pageCtl.maxPage){

out.print("下一頁

尾頁");

}else{

%

A

HREF="javascript:gotoPage(%=pageCtl.curPage+1%)"下一頁/A

A

HREF="javascript:gotoPage(%=pageCtl.maxPage%)"尾頁/A

%}%

轉到第SELECT

name="jumpPage"

onchange="Jumping()"

%

for(int

i=1;i=pageCtl.maxPage;i++)

{

if

(i==

pageCtl.curPage){

%

OPTION

selected

value=%=i%%=i%/OPTION

%}else{%

OPTION

value=%=i%%=i%/OPTION

%}}%

/SELECT頁

最后附上用于頁面跳轉的javascript公共函數:

function

Jumping(){

document.PageForm.submit();

return

;

}

function

gotoPage(pagenum){

document.PageForm.jumpPage.value

=

pagenum;

document.PageForm.submit();

return

;

}

運行效果：

分頁跳轉的時候，上一頁，下一頁按鈕 如何用javascript傳值

你好，我這里有個自己寫的javascript的分頁，你可以去借鑒一下，希望能幫到你。

//定義有關分頁的操作

var?pageSize;//每頁顯示的記錄數

var?countPage;//總頁數

var?countRecord;//總記錄數

var?nowPage=1;//當前頁

var?startIndex;//每頁開始的記錄數

var?endIndex;//每頁結束的記錄數

var?$pageInfo;

var?$showUsers;

//dom載入完畢?觸發(fā)的匿名函數

$(document).ready(function()?{

//分頁操作

pageSize=$("#pagesize").val();//獲取默認的pageSize的值

$pageInfo=$("#showPageInfo");

$showUsers=$("#showUsers");

//?獲取全選input刪除的dom對象

var?qxDom?=?$("#qx")[0];

//?把checkbox設置為沒有選中的狀態(tài)

qxDom.checked?=?false;

//?把table隱藏

$("#users").css("display",?"none");

//?根據id獲取添加的input的jquery對象

var?$name?=?$("#name");

var?$sex?=?$("input[type='radio']:checked");

var?$age?=?$("#age");

/*----------------下面是添加按鈕的事件-------------------*/

//?注冊按鈕事件

$("#addUser").click(function()?{

//?獲取table中display樣式的值

var?val?=?$("#users").css("display");

//?判斷是否隱藏

if?("none"?==?val)?{

//?顯示

$("#users").show();

}

//?獲取name值

var?name?=?$name.val();

//?獲取sex

var?sex?=?$sex.val();

//?獲取age

var?age?=?$age.val();

//?創(chuàng)建tr

var?$tr?=?$("tr/tr");

//?創(chuàng)建td

var?$td1?=?$("td/td");

//?創(chuàng)建input

var?$input?=?$("input?type='checkbox'");

$td1.append($input);

//?創(chuàng)建td?并且?添加name文本節(jié)點

var?$td2?=?$("td/td").append(name);

//?創(chuàng)建td?并且?把sex?對應的文本添加到td中

var?$td3?=?$("td/td").append(sex);

var?$td4?=?$("td/td").append(age);

//?創(chuàng)建按鈕并且為其注冊事件

var?$deleteBtn?=?$("input?type='button'?value='刪除'");

//?給按鈕注冊事件

$deleteBtn.click(function()?{

$(this).parent().parent().remove();

});

var?$td5?=?$("td/td");

//?或者

//?$td5.append($deleteBtn);

//?把創(chuàng)建的按鈕添加到td5中

$deleteBtn.appendTo($td5);

//?注冊可編輯事件

$td2.dblclick(clickTd);

$td3.dblclick(clickTd);

$td4.dblclick(clickTd);

//?對象的鏈式操作

$tr.append($td1).append($td2).append($td3).append($td4).append($td5);

//?在tbody中添加tr

$showUsers.append($tr);

//添加成功之后?進行分頁操作

countRecord=$("#showUsers?tr").size();//獲取總記錄數

pageInfo();

});

/*----------------上面是添加按鈕的事件-------------------*/

/*----------------下面是全選的事件處理-------------------*/

//?全選和反選的操作

$("#qx").click(function()?{

if?(this.checked)?{

$("tdinput[type='checkbox']").each(function()?{

this.checked?=?true;

});

}?else?{

$("tdinput[type='checkbox']").each(function()?{

this.checked?=?false;

});

}

})

/*----------------上面是全選的事件處理-------------------*/

/*----------------下面是批量刪除的事件處理-------------------*/

//?刪除的操作

$("#deleteCheckedBtn").click(function()?{

$("tdinput[type='checkbox']").each(function()?{

if?(this.checked)?{

//?刪除所選中的tr行

$(this).parent().parent().remove();

}

//?并且將復選框設置為沒選中的狀態(tài)

qxDom.checked?=?false;

});

});

/*----------------上面是批量刪除的事件處理-------------------*/

//注冊改變的事件

$("#pagesize").change(function(){

pageSize=$(this).val();

pageInfo();

});

var?$firstBtn=$("#firstBtn");

var?$backBtn=$("#backBtn");

var?$nextBtn=$("#nextBtn");

var?$lastBtn=$("#lastBtn");

$firstBtn.click(pageInfo);

$backBtn.click(pageInfo);

$nextBtn.click(pageInfo);

$lastBtn.click(pageInfo);

});

/*----------------下面是表格可編輯的事件處理-------------------*/

//?注冊的編輯事件處理

var?clickTd?=?function()?{

//?獲取當前對象中孩子節(jié)點為input的集合對象?判斷這個集合對象的長度是否大于0

if?($(this).children("input").length??0)?{

//?返回程序

return?false;

}?else?{

//?獲取點擊的td的值

var?value?=?$(this).text();

//?td清空

$(this).empty();

//?創(chuàng)建input輸入框

var?$cinput?=?$("input?type='text'?value='"?+?value?+?"'");

//?失去焦點的事件

$cinput.blur(blurInput);

//?添加到td中

$(this).append($cinput);

}

}

//?失去焦點觸發(fā)的函數

var?blurInput?=?function()?{

//?獲取值

var?value?=?$(this).val();

//?給td重新設置文本

$(this).parent().text(value);

}

/*----------------上面是表格可編輯的事件處理-------------------*/

var?pageInfo=function(){

//獲取總記錄數

countRecord=$("#showUsers?tr").size();

//計算總頁數

countPage=Math.ceil(countRecord/pageSize);

//點擊按鈕的判斷

if(this.nodeType==1){

//首先獲取你點擊的按鈕的id的值

var?idValue=$(this).attr("id");

//判斷是否是首頁

if("firstBtn"==idValue){

nowPage=1;

//判斷是否是上一頁

}else?if("backBtn"==idValue){

if(nowPage1){

nowPage--;

}

//判斷是否是下一頁

}else?if("nextBtn"==idValue){

if(nowPagecountPage){

nowPage++;

}

//判斷是否是末頁

}else?if("lastBtn"==idValue){

nowPage=countPage;

}

}

startIndex=(nowPage-1)*pageSize+1;//獲取每頁開始記錄數

endIndex=nowPage*pageSize;//獲取每頁結束記錄數

//如果結束的記錄大于總記錄數

if(endIndex=countRecord){

//讓結束的記錄數?等于總記錄數

endIndex=countRecord;

}

//如果結束的記錄數小于顯示的記錄數

if(countRecord=pageSize){

endIndex=countRecord;

}

//顯示操作

$("#showUsers?tr:gt("+(startIndex-1)+")").show();

$("#showUsers?tr:lt("+(endIndex-1)+")").show();

//隱藏操作

//設置隱藏超出頁數之外的數據

$("#showUsers?tr:lt("+(startIndex-1)+")").css("display","none");

$("#showUsers?tr:gt("+(endIndex-1)+")").css("display","none");

$pageInfo.html("當前從"+startIndex+"記錄到"+endIndex+"記錄數，共"+countRecord+"記錄當前是"+nowPage+",共"+countPage+"頁");

}

文章名稱：javascript分頁,web前端分頁
分享路徑：http://jinyejixie.com/article32/dsdjisc.html

成都網站建設公司_創(chuàng)新互聯，為您提供電子商務、標簽優(yōu)化、服務器托管、營銷型網站建設、建站公司、網站收錄

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯