jquery动态分页
最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享。分页效果与时光网的差不多。
网址:http://www.mtime.com/movie/news/all/
先在aspx页面放置一个<div class="pageDivs"></div> ,这个是用来存放分页的。
然后建一个page.js文件,具体代码如下(js中用到的css类是自己设置的,这里就不给出了,具体的大家可以自己设置一下css样式):
$(document).ready(function(){
var pageCount=0;//总页数,在数据处理的函数里设定
//////////////////////右部按钮分页显示
function right(pageCount,limit,rlimit){
var html="";
if(parseInt(pageCount)-limit>=rlimit){
for(var i=parseInt(pageCount)-rlimit+1; i<=parseInt(pageCount); i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
}
else{
for(var i=parseInt(limit)+1; i<=pageCount; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
}
return html;
}
//////////////////////////首页,尾页,上一页,下一页
function changeState(pageIndex,pageCount){
var $button1=$("div.pageDivs").find("#Button1");//上一页
var $button2=$("div.pageDivs").find("#Button2");//下一页
var $first=$("div.pageDivs").find("#First");//首页
var $last=$("div.pageDivs").find("#Last");//尾页
if(parseInt(pageIndex)==1){
$first.css("display","none");
$button1.css("display","none");}
else{
$first.css("display","inline");
$button1.css("display","inline");
$first.attr("page",1);
$button1.attr("page",parseInt(pageIndex)-1);}
if(parseInt(pageIndex)==pageCount){
$button2.css("display","none");
$last.css("display","none");}
else{
$last.css("display","inline");
$button2.css("display","inline");
$last.attr("page",pageCount);
$button2.attr("page",parseInt(pageIndex)+1);}
}
////////////////////////////////span动态分页 左边显示的页码个数,右边显示的页码个数,要求limit>rlimit
function span(pageCount,pageIndex,limit,rlimit){
var isContinue=true;//指示是否继续执行函数
var html="<a id='First' href='#' >|<</a><a id='Button1' href='#' ><</a>";
var change=(parseInt(pageCount)-parseInt(rlimit))/(parseInt(limit)-2);//指示分页码可以变动的次数
if(pageCount!=0&&pageCount!=1){
if(pageCount<=limit){
for(var i=1; i<=pageCount; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>"}
}
else{
if(parseInt(pageIndex)<(limit-2)){
for(var i=1; i<=limit; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
html+="...";
html+=right(pageCount,limit,rlimit);
}
else{
if(parseInt(pageIndex)%(limit-2)==0){
if(parseInt(pageIndex)/(limit-2)<=change&&parseInt(pageIndex)-1+parseInt(limit)-1<=parseInt(pageCount)-parseInt(rlimit)){
for(var i=parseInt(pageIndex)-1; i<parseInt(pageIndex)-1+limit; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
html+="...";
html+=right(pageCount,limit,rlimit);
}
else{
for(var i=1; i<=rlimit; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
html+="...";
var rest=parseInt(pageCount)-parseInt(rlimit);
if(rest<limit){
for(var i=parseInt(rlimit)+1; i<=parseInt(pageCount); i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
}
else{
var start=parseInt(pageCount)-parseInt(limit)+1;
for(var i=start; i<=pageCount; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
}
}
}
else{
html=$("div.pageDivs").html();
$("div.pageDivs").html(html);
isContinue=false;
}
}
}
}
if(isContinue){
html+="<a id='Button2' href='#' >></a><a id='Last' href='#' >>|</a>";
$("div.pageDivs").html(html);}
changeState(pageIndex,pageCount);
$("div.pageDivs").find("a[page=" + parseInt(pageIndex) + "]:visible").removeAttr("href").removeClass("disabled").addClass("current").siblings("a[page]:visible").removeClass("current").addClass("disabled").attr("href", "#");
}
function page(pageIndex){
/////////////这里放你具体的数据显示,使用ajax动态加载处理数据
pageCount="通过数据处理获得的页面总数";
span(pageCount,pageIndex,7,2);//对分页效果进行调用,这里设置左边显示7个页码,右边显示2个页码。
}
//////////////////////////////为页码绑定事件
$("div.pageDivs").find("a:visible").live("click",function(){
var result=$(this).attr("page");
if((typeof $(this).attr("leaf"))!= 'undefined'){
$(this).removeAttr("href").removeClass("disabled").addClass("current").siblings().removeClass("current").addClass("disabled").attr("href","#");}
page(result);
});
});
这样就行了,以上分页的算法是可以封装的,与具体的项目没关系,可以通用。
jquery动态分页的更多相关文章
- jQuery异步分页插件
学校软件工程让写课程设计(其实就是自选语言做个项目),感觉都是重复的东西就没有很认真的去写内容,更加注意写一些之前没有用过的东西. 因为一直都使用TP框架来写PHP,TP又自带分页类,想到这里就想试试 ...
- LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页
LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...
- IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
- jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- jQuery动态增删改查表格信息,可左键/右键提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
- Jquery动态在td中添加checkbox
如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...
- jQuery动态提示消息框效果
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...
- jQuery动态产生的铵钮怎样实现事件处理
在ASP.NET MVC环境中,实现一个小功能,就是希望使用jQuery动态一个铵钮,并让用户能执行这个铵钮的click事件.为了更好的理解与对比,Insus.NET在视图中先写一个静态的,执行相似的 ...
随机推荐
- Android多点触摸放大缩小图片
1.Activity package com.fit.touchimage; import android.app.Activity; import android.graphics.Bitmap; ...
- IDLE经常使用快捷键汇总
IDLE(An Integrated DeveLopment Environment for Python)是Python自带的编译器,在刚開始学习的人,或写小程序,或用于验证的时候,经经常使用到!假 ...
- struts2 循环标签使用
struts2 counter循环标签的使用: struts2随提供了循环控制标签<s:iterator/>,,使用起来也比较方便,但在具体的应用中,也有不方便之处,他没有像struts1 ...
- php 7.1安装教程
一.下载地址 http://php.net/downloads.php#v7.1.9 IIS如果你使用的是PHP的FastCGI IIS,你应该使用非线程安全(NTS)版本的PHP. Apache请使 ...
- (转)C#中的Predicate<T>与Func<T, bool>
Delegate至少0个参数,至多32个参数,可以无返回值,也可以指定返回值类型.这个是祖宗. Func可以接受0个至16个传入参数,必须具有返回值. Action可以接受0个至16个传入参数,无 ...
- mysql数据库以加索引方式提高性能
数据库查询速率慢的情况下可以给对应的表加上对应的索引,能够有效的提高查询效率,mysql数据库添加索引的SQL入下: ALTER TABLE `table_name` ADD INDEX index_ ...
- novas的verdi和debussy是干什么用的(关于debussy的一些介绍)
source code window: 提供了一个比较友好的界面,将整个设计的source code按设计的层次结构以树状排布,并且可以在代码上反标仿真结果,支持查找.寻找驱动等一些debug常用的操 ...
- 【Android】6.4 DatePickerDialog和TimePickerDialog
分类:C#.Android.VS2015: 创建日期:2016-02-08 一.简介 在Android应用中,日期选择对话框和时间选择对话框是分别提供的. 日期选择对话框(DatePickerDial ...
- python(33)多进程和多线程的区别
多线程可以共享全局变量,多进程不能.多线程中,所有子线程的进程号相同:多进程中,不同的子进程进程号不同. #!/usr/bin/python # -*- coding:utf-8 -*- import ...
- nyoj138 哈希的简单应用(查找)
找球号(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 在某一国度里流行着一种游戏.游戏规则为:现有一堆球中,每个球上都有一个整数编号i(0<=i<=1 ...