!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
我們提供的服務(wù)有:成都網(wǎng)站設(shè)計、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、六枝ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的六枝網(wǎng)站制作公司
html xmlns=""
head
titlejquery分頁控件/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"首頁/div
div class="pre"上一頁/div
div class="centerclass"/div
div class="next"下一頁/div
div class="last"最后一頁/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\"首頁/div";
var prediv="div class=\"pre\"上一頁/div";
var centerdiv="div class=\"centerclass\"/div";
var nextdiv="div class=\"next\"下一頁/div";
var lastdiv="div class=\"last\"最后一頁/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;//最后一頁顯示記錄
if(lastSize0)
{
size=size+1;
}
totelSec=parseInt(size/centersize);
var leftSize=size%centersize;//最后一個區(qū)段的顯示記錄
if(leftSize0)
{
totelSec =totelSec+1;
}
PageBarinit();
}
var reSetPage=function()
{
pageindex=1;
pagesize=0;
totelSec=0;
outStr="";
}
// alert('總頁數(shù):'+size)
// alert('總區(qū)段:'+totelSec)
// alert('每頁記錄數(shù):'+pagesize);
var SeClick=function(e)
{
var Selectindex=e.target[e.target.selectedIndex].innerText;
pagesize=parseInt(Selectindex);
alert('每頁顯示:'+Selectindex);
reSetPage();
PageReinit();
}
var firstClick=function(e)
{
alert('點擊到首頁');
if(pageindex!=1)
{
pageindex=1;
alert('到了第1頁');
}
}
var preClick=function(e)
{
alert('點擊到上一頁');
if(pageindex!=1)
{
pageindex =pageindex-1;
alert('到了第'+pageindex+'頁');
}
ChangeCenterBar(pageindex+1);
}
var pageClick=function(e)
{
var targePage=parseInt(e.target.innerText);
pageindex=targePage;
alert('點擊了第'+targePage+"頁");
ChangeCenterBar(targePage);
}
var nextClick=function(e)
{
alert('點擊了下一頁');
if(pageindexsize)
{
pageindex =pageindex+1;
if(pageindex==size)
{
alert('到了最后一頁');
}
else{
alert('到了第'+pageindex+'頁');
}
}
ChangeCenterBar(pageindex-1);
}
var lastClick=function(e)
{
alert('點擊了最后一頁');
if(pageindexsize)
{
pageindex=size;
alert('到了第'+size+'頁');
}
}
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('分頁出錯');
}
}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('分頁出錯');
}
}
}
}
PageReinit();
}
PageInit();
/script
jquery動態(tài)實現(xiàn)表格分頁的方法是利用自帶的分頁插件jQuery.page.js。
下面是使用方法:
$(".tcdPageCode").createPage({
? pageCount:10,
? current:1,
? backFn:function(p){
? ? ? //單擊回調(diào)方法,p是當(dāng)前頁碼
? }
});
pageCount:總頁數(shù)
current:當(dāng)前頁
實現(xiàn)分頁的tab如下:
div class="tcdPageCode"
span class="disabled"上一頁/span
span class="current"1/span
a href="javascript:;" class="tcdNumber"2/a
a href="javascript:;" class="tcdNumber"3/a
a href="javascript:;" class="tcdNumber"4/a
span.../span
a href="javascript:;" class="tcdNumber"6/aa href="javascript:;" class="nextPage"下一頁/a/div
實現(xiàn)效果:
jQuery Pagination分頁插件
使用方法
跟一般的jQuery插件一樣,此插件使用也很簡單便捷。方法是pagination,例如$("#page").pagination(100);
$("#Pagination").pagination(56, {
num_edge_entries: 2,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page:1
});