jq实现html分页代码,jquery 分页控件实现代码
var pageindex=1;
var totelsize=60;
var centersize=5;
var pagesize=0;
var totelSec=0;
var outStr="";
var se=""
+"5"
+"10"
+"15"
+"";
var firstdiv="
";
var prediv="
";
var centerdiv="
var nextdiv="
";
var lastdiv="
";
$('.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(lastSize>0)
{
size=size+1;
}
totelSec=parseInt(size/centersize);
var leftSize=size%centersize;//最后一个区段的显示记录
if(leftSize>0)
{
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(pageindex
{
pageindex =pageindex+1;
if(pageindex==size)
{
alert('到了最后一页');
}
else{
alert('到了第'+pageindex+'页');
}
}
ChangeCenterBar(pageindex-1);
}
var lastClick=function(e)
{
alert('点击了最后一页');
if(pageindex
{
pageindex=size;
alert('到了第'+size+'页');
}
}
var ChangeCenterBar=function(CurrentIndex)
{
var currentSec=parseInt(CurrentIndex/centersize);
if( CurrentIndex%centersize==1)
{
if(currentSec
{ PageBarinit();}
}
if(CurrentIndex%centersize==0)
{
var currentSec=parseInt(CurrentIndex/centersize);
if(currentSec
{ 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=""+i+"";
$('.centerclass').append(cdiv);
$("#Page_"+i).bind('click',pageClick);
}
}else if(size>centersize)
{
$('.centerclass').empty();
if( pageindex%centersize==0)
{
var currentSec=parseInt(pageindex/centersize);//当前区段
if(currentSec
{
// alert(9)
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex<=currentSec*centersize;startIndex++)
{
//alert(startIndex)
//alert('最大'+currentSec*centersize);
var cdiv=""+startIndex+"";
$('.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=""+startIndex+"";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}else{
alert('分页出错');
}
}else if(pageindex%centersize>0)
{
var currentSec=parseInt(pageindex/centersize)+1;//当前区段
if(currentSec
{
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex<=((currentSec-1)*centersize+centersize);startIndex++)
{
var cdiv=""+startIndex+"";
$('.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=""+startIndex+"";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}else
{
alert('分页出错');
}
}
}
}
PageReinit();
}
PageInit();
jq实现html分页代码,jquery 分页控件实现代码相关推荐
- 日历控件的android代码,Android日历控件PickTime代码实例
Android日历控件PickTime代码实例 发布时间:2020-10-03 16:05:51 来源:脚本之家 阅读:86 作者:手撕高达的村长 最近做项目,需要设置用户的生日,所以做这样一个功能. ...
- 206_QT_功能实现代码、界面控件操作代码分开实现,很不错【采用了Q_CLASSINFO、Q_PROPERTY、setProperty对控件设置属性、qobject_cast】
动图: setProperty对控件设置属性,用于判断是哪一个控件,很巧妙 使用qobject_cast,对类指针进行下行转换,也很不错 qperson.h–年龄增加功能实现 #ifndef QPER ...
- 非存储过程分页- 前台分页样式和控件
非存储过程分页- 前台分页样式和控件 一. DAL /// ///分页sql /// public DataTable GetUserAndError(int pageSize, int page ...
- 服务器lIS绑定网站,DataList 中动态绑定服务器子控件的代码
DataList 中动态绑定服务器子控件的代码 更新时间:2007年09月10日 21:54:04 作者: 1.首先绑定dbList (一个DataList控件名称) 2.设置绑定子控件需要的关键 ...
- Jquery获得控件值的方法
一 Jquery获得服务器控件值的方法 由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<a ...
- 精确到秒的JQuery日期控件,jquery日历插件,jquery日期插件
2019独角兽企业重金招聘Python工程师标准>>> 效果图如下: 首先在页面中引用一下库: <link type="text/css" href=&qu ...
- ASP.NET重用代码技术 - 用户控件技术
作者: 苏红超 使用ASP.NET中的代码绑定技术来使得代码重用变得简单可行.我们发现,利用代码绑定技术我们可以容易的将我们的代码和内容分离开来,利用它可以建立可重用的代码,只是这种技术本身也存在着一 ...
- 控件包含代码块,因此无法修改控件集合
文章转载至: http://www.olnote.com/itlife/note/100000003.aspx 控件包含代码块(即<% ... %>),因此无法修改控件集合. 说明: 执 ...
- 控件包含代码块(即 % ... %),因此无法修改控件集合。
第一种: 在使用主题的时候出现 控件包含代码块(即 <% ... %>),因此无法修改控件集合错误,原来错误的原因是: 控件包含代码块(即 <% ... %>),因此无法修改控 ...
- Jquery 日历控件
非常好的Jquery日历控件 http://keith-wood.name/datepick.html 转载于:https://www.cnblogs.com/hubj/archive/2011/04 ...
最新文章
- 【CSDN2012年度博客之星】需要您的一票,感谢大家的支持
- 导入外部项目无法识别为Web项目无法部署到tomcat
- 本地安全沙箱最快解决办法
- Android Canvas画图形(更新中)
- 一条SQL语句执行得很慢的原因有哪些?
- P5737 【深基7.例3】闰年展示(python3实现)
- 没想到,这么简单的线程池用法,深藏这么多坑
- vsc中HTML配置,vscode怎么配置node?
- Poj 1936,3302 Subsequence(LCS)
- 【语音识别】基于matlab MFCC+IPC特征+SVM中英语种识别【含Matlab源码 612期】
- 安徽省湖泊河流ArcGIS地形图shp图层文件下载
- 如何设计 RQData 通讯协议 - Ricequant米筐量化
- Java中的frontcolor_front的用法总结大全
- 蒸汽流量计算软件_网上难得学到的知识!涡街流量计选型设计有诀窍
- 华为交换机如何恢复出厂设置
- 漫画趣解Linux内核
- 1. 拼多多什么软件可以看到大数据?拼多多大数据分析软件有哪些?
- Elasticsearch - JNA
- AAAI 2020 提前看 | 三篇论文解读问答系统最新研究进展
- 马尔科夫不等式和坎泰利不等式的证明