!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
作為一家“創(chuàng)意+整合+營(yíng)銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們?cè)跇I(yè)內(nèi)良好的客戶口碑。成都創(chuàng)新互聯(lián)公司提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、創(chuàng)意表現(xiàn)、網(wǎng)頁(yè)制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營(yíng)銷運(yùn)營(yíng)等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營(yíng)模式與有效的網(wǎng)絡(luò)營(yíng)銷方法,創(chuàng)造更大的價(jià)值。
html xmlns=""
head
titlejquery分頁(yè)控件/title
script src="jquery-1.3.min.js" type="text/javascript"/script
/head
body
div class="pager"/div
!--div
select class="SEID"
option10/option
option selected="selected" 20/option
option30/option
/select
div class="first"首頁(yè)/div
div class="pre"上一頁(yè)/div
div class="centerclass"/div
div class="next"下一頁(yè)/div
div class="last"最后一頁(yè)/div
input type="text" value="1" / ofspan class="totelspan"0/span
/div--
/body
/html
script type="text/javascript"
var pageindex=1;
var totelsize=60;
var centersize=5;
var pagesize=0;
var totelSec=0;
var outStr="";
var se="select class=\"SEID\""
+"option5/option"
+"option selected=\"selected\" 10/option"
+"option15/option"
+"/select";
var firstdiv="div class=\"first\"首頁(yè)/div";
var prediv="div class=\"pre\"上一頁(yè)/div";
var centerdiv="div class=\"centerclass\"/div";
var nextdiv="div class=\"next\"下一頁(yè)/div";
var lastdiv="div class=\"last\"最后一頁(yè)/div";
$('.pager').empty();
$('.pager').append(se)
$('.pager').append(firstdiv)
$('.pager').append(prediv)
$('.pager').append(centerdiv)
$('.pager').append(nextdiv)
$('.pager').append(lastdiv)
function PageInit()
{
var size=0;
var barObj=this;
var PageReinit=function()
{
pagesize=$(".SEID option:selected")[0].innerText;
size=parseInt(totelsize/pagesize)
var lastSize=totelsize%pagesize;//最后一頁(yè)顯示記錄
if(lastSize0)
{
size=size+1;
}
totelSec=parseInt(size/centersize);
var leftSize=size%centersize;//最后一個(gè)區(qū)段的顯示記錄
if(leftSize0)
{
totelSec =totelSec+1;
}
PageBarinit();
}
var reSetPage=function()
{
pageindex=1;
pagesize=0;
totelSec=0;
outStr="";
}
// alert('總頁(yè)數(shù):'+size)
// alert('總區(qū)段:'+totelSec)
// alert('每頁(yè)記錄數(shù)：'+pagesize);
var SeClick=function(e)
{
var Selectindex=e.target[e.target.selectedIndex].innerText;
pagesize=parseInt(Selectindex);
alert('每頁(yè)顯示：'+Selectindex);
reSetPage();
PageReinit();
}
var firstClick=function(e)
{
alert('點(diǎn)擊到首頁(yè)');
if(pageindex!=1)
{
pageindex=1;
alert('到了第1頁(yè)');
}
}
var preClick=function(e)
{
alert('點(diǎn)擊到上一頁(yè)');
if(pageindex!=1)
{
pageindex =pageindex-1;
alert('到了第'+pageindex+'頁(yè)');
}
ChangeCenterBar(pageindex+1);
}
var pageClick=function(e)
{
var targePage=parseInt(e.target.innerText);
pageindex=targePage;
alert('點(diǎn)擊了第'+targePage+"頁(yè)");
ChangeCenterBar(targePage);
}
var nextClick=function(e)
{
alert('點(diǎn)擊了下一頁(yè)');
if(pageindexsize)
{
pageindex =pageindex+1;
if(pageindex==size)
{
alert('到了最后一頁(yè)');
}
else{
alert('到了第'+pageindex+'頁(yè)');
}
}
ChangeCenterBar(pageindex-1);
}
var lastClick=function(e)
{
alert('點(diǎn)擊了最后一頁(yè)');
if(pageindexsize)
{
pageindex=size;
alert('到了第'+size+'頁(yè)');
}
}
var ChangeCenterBar=function(CurrentIndex)
{
var currentSec=parseInt(CurrentIndex/centersize);
if( CurrentIndex%centersize==1)
{
if(currentSectotelSec)
{ PageBarinit();}
}
if(CurrentIndex%centersize==0)
{
var currentSec=parseInt(CurrentIndex/centersize);
if(currentSectotelSec)
{ PageBarinit();}
}
}
var PageBarinit=function()
{
$('.SEID').unbind('change',SeClick);
$('.first').unbind('click',firstClick);
$('.pre').unbind('click',preClick);
$('.next').unbind('click',nextClick);
$('.last').unbind('click',lastClick);
$('.SEID').bind('change',SeClick);
$('.first').bind('click',firstClick);
$('.pre').bind('click',preClick);
$('.next').bind('click',nextClick);
$('.last').bind('click',lastClick);
if(size=centersize)
{
$('.centerclass').empty();
for(var i=1;i=size;i++)
{
var cdiv="span id='Page_"+String(i)+"'"+i+"/span";
$('.centerclass').append(cdiv);
$("#Page_"+i).bind('click',pageClick);
}
}else if(sizecentersize)
{
$('.centerclass').empty();
if( pageindex%centersize==0)
{
var currentSec=parseInt(pageindex/centersize);//當(dāng)前區(qū)段
if(currentSectotelSec)
{
// alert(9)
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex=currentSec*centersize;startIndex++)
{
//alert(startIndex)
//alert('最大'+currentSec*centersize);
var cdiv="span id='Page_"+String(startIndex)+"'"+startIndex+"/span";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}
else if(currentSec==totelSec)
{
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex=currentSec*centersize;startIndex++)
{
var cdiv="span id='Page_"+String(startIndex)+"'"+startIndex+"/span";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}else{
alert('分頁(yè)出錯(cuò)');
}
}else if(pageindex%centersize0)
{
var currentSec=parseInt(pageindex/centersize)+1;//當(dāng)前區(qū)段
if(currentSectotelSec)
{
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex=((currentSec-1)*centersize+centersize);startIndex++)
{
var cdiv="span id='Page_"+String(startIndex)+"'"+startIndex+"/span";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}
else if(currentSec==totelSec){
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex=((currentSec-1)*centersize +size%centersize);startIndex++)
{
var cdiv="span id='Page_"+String(startIndex)+"'"+startIndex+"/span";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}else
{
alert('分頁(yè)出錯(cuò)');
}
}
}
}
PageReinit();
}
PageInit();
/script
jQuery Pagination分頁(yè)插件
使用方法
跟一般的jQuery插件一樣，此插件使用也很簡(jiǎn)單便捷。方法是pagination，例如$("#page").pagination(100);
$("#Pagination").pagination(56, {
num_edge_entries: 2,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page:1
});
主要是借鑒了網(wǎng)上一個(gè)例子，修改了一些小地方，前端分頁(yè)的技巧，表格的數(shù)據(jù)是已經(jīng)寫好了，可以前端渲染表格然后再分頁(yè)，都是可以的。
其實(shí)分頁(yè)最關(guān)鍵是這兩句：
var startRow = (currentPage - 1) * pageSize+1;? //currentPage 為當(dāng)前頁(yè)，pageSize為每頁(yè)顯示的數(shù)據(jù)量
var endRow = currentPage * pageSize;
找到我們需要顯示的行的范圍（starRow~endRow）
ps:這里在跳轉(zhuǎn)的時(shí)候遇到了一個(gè)小BUG，就是獲取到的select的value值是string類型的，比如獲取到了1，然后你想再加1的時(shí)候就會(huì)變成"11" ?而不是我們想要的"2"，所以這里需要用parseInt( )來(lái)轉(zhuǎn)換一下，小細(xì)節(jié)需要注意呀?。。?/p>
效果圖：
[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"序號(hào)/th
th?width="300"?class="td2"用戶名/th
th?width="250"?class="td2"權(quán)限/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"首頁(yè)/a/li
lia?href="###"?id="prePage"上一頁(yè)/a/li
lia?href="###"?id="nextPage"下一頁(yè)/a/li
lia?href="###"?id="lastPage"尾頁(yè)/a/li
liselect?id="jumpWhere"
/select/li
lia?href="###"?id="jumpPage"?onclick="jumpPage()"跳轉(zhuǎn)/a/li
/ul
/div
/div
script?src="jquery.js"/script
script
/*動(dòng)態(tài)生成用戶函數(shù)
num為生成的用戶數(shù)量
*/
function?dynamicAddUser(num){
for(var?i=1;i=num;i++)
{
var?trNode=document.createElement("tr");
$(trNode).attr("align","center");
//序號(hào)
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";
//權(quán)限
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);
})
/**
*?分頁(yè)函數(shù)
*?pno--頁(yè)數(shù)
*?psize--每頁(yè)顯示記錄數(shù)
*?分頁(yè)部分是從真實(shí)數(shù)據(jù)行開始，因而存在加減某個(gè)常數(shù)，以確定真正的記錄數(shù)
*?純js分頁(yè)實(shí)質(zhì)是數(shù)據(jù)行全部加載，通過(guò)是否顯示屬性完成分頁(yè)功能
**/
var?pageSize=0;//每頁(yè)顯示行數(shù)
var?currentPage_=1;//當(dāng)前頁(yè)全局變量，用于跳轉(zhuǎn)時(shí)判斷是否在相同頁(yè)，在就不跳，否則跳轉(zhuǎn)。
var?totalPage;//總頁(yè)數(shù)
function?goPage(pno,psize){
var?itable?=?document.getElementById("adminTbody");
var?num?=?itable.rows.length;//表格所有行數(shù)(所有記錄數(shù))
pageSize?=?psize;//每頁(yè)顯示行數(shù)
//總共分幾頁(yè)
if(num/pageSize??parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var?currentPage?=?pno;//當(dāng)前頁(yè)數(shù)
currentPage_=currentPage;
var?startRow?=?(currentPage?-?1)?*?pageSize+1;
var?endRow?=?currentPage?*?pageSize;
endRow?=?(endRow??num)??num?:?endRow;
//遍歷顯示數(shù)據(jù)實(shí)現(xiàn)分頁(yè)
/*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+"頁(yè)?當(dāng)前第"+currentPage+"頁(yè)";
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 Document
$(document).ready(function(){
$('#page_break .num li:first').addClass('on');
$('#page_break .num li').click(function(){
//隱藏所有頁(yè)內(nèi)容
$("#page_break div[id^='page_']").hide();
//顯示當(dāng)前頁(yè)內(nèi)容。
if ($(this).hasClass('on')) {
$('#page_break #page_' + $(this).text()).show();
} else {
$('#page_break .num li').removeClass('on');
$(this).addClass('on');
$('#page_break #page_' + $(this).text()).fadeIn('normal');
}
});
});
jPaginate 是一款非常精致的分頁(yè)插件，提供了五種不同風(fēng)格的分頁(yè)效果，支持鼠標(biāo)懸停翻頁(yè)，快速分頁(yè)功能。
這款插件還提供了豐富的配置選項(xiàng)，你可以根據(jù)需要進(jìn)行設(shè)置。
這個(gè)有插件的
建議你在 百度搜索，傲隆盛 一般的 做法有前端對(duì)數(shù)據(jù)處理
或者是后端對(duì)數(shù)據(jù)分頁(yè)，然后使用ajax去根據(jù)分頁(yè)數(shù)據(jù)分別獲取
如果數(shù)據(jù)量很大 aols
建議你在后臺(tái)的程序分頁(yè)后，用ajax去獲取再前端再展示
希望對(duì)你有幫助！
重慶分公司
重慶分公司
