jquery 分页控件实现代码

讨厌嚣张

讨厌嚣张

2016-02-19 14:44

想要天天向上,就要懂得享受学习。图老师为大家推荐jquery 分页控件实现代码,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
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;//最后一个区段的显示记录
if(leftSize0)
{
totelSec =totelSec+1;
}
PageBarinit();
}
var reSetPage=function()
{
pageindex=1;
pagesize=0;
totelSec=0;
outStr="";
}
// alert('总页数:'+size)
// alert('总区段:'+totelSec)
// alert('每页记录数:'+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);//当前区段
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;//当前区段
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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

jquery 分页控件实现代码

Web开发
jquery 分页控件实现代码

Jquery+JSon 无刷新分页实现代码

Web开发
Jquery+JSon 无刷新分页实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Jquery Ajax.ashx 高效分页实现代码

Web开发
Jquery Ajax.ashx 高效分页实现代码

jquery下操作HTML控件的实现代码

Web开发
jquery下操作HTML控件的实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery 可拖拽的窗体控件实现代码

Web开发
jquery 可拖拽的窗体控件实现代码

jQuery 浮动广告实现代码

Web开发
jQuery 浮动广告实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

MySQL:如何为用户设置密码

MySQL:如何为用户设置密码

Win10屏幕亮度调不了怎么回事

Win10屏幕亮度调不了怎么回事
下拉加载更多内容 ↓