javascript ajax 仿百度分页函数


Posted in Javascript onOctober 29, 2013
/** 
* Ajax分页功能 
* 在需要分页的地方添加<ul class="pagination"></ol> 
* 作为分页组件容器元素。 
* pageCount 总页数 
* currentPage 当前页数 
* container 带有pagination类的ol容器元素 
* loadData 用于加载数据的函数 
* version 1.0 
*/ 
pagination : function(pageCount, currentPage, container, loadData) { 
this.startPage = 1; 
this.endPage = pageCount; 
this.minDisplayPageCount = 5; 
var c = $(container); 
var paginationLinks = ""; 
if(pageCount == 1) { 
c.css({'visibility': 'hidden'}); 
return; 
} 
if(pageCount > this.minDisplayPageCount + 1) { 
if(currentPage - this.minDisplayPageCount > 0) { 
this.startPage = currentPage - this.minDisplayPageCount; 
} 
if((currentPage + this.minDisplayPageCount - 1) < pageCount) { 
this.endPage = currentPage + this.minDisplayPageCount - 1; 
} else { 
this.endPage = pageCount; 
} 
} 
paginationLinks += "<ul>"; 
if(currentPage != 1) { 
paginationLinks += "<li><a id='prevpage' href='javascript:;' rel='prev'>《上一页</a></li>"; 
} 
for(var i = this.startPage; i <= this.endPage; i++) { 
if(currentPage == i) { 
paginationLinks += "<li id='page_" + currentPage + "_container'><a id='page_" + i + "' class='current' href='javascript:;'>" + currentPage + "</a></li>"; 
} else { 
paginationLinks += "<li id='page_" + i + "_container'><a id='page_" + i + "' href='javascript:;'>" + i + "</a></li>"; 
} 
} 
if(currentPage < pageCount) { 
paginationLinks += "<li><a id='nextpage' href='javascript:;' rel='next'>下一页》</a></li>"; 
} 
paginationLinks += "</ul>"; 
c.html(paginationLinks); 
var links = $("#page_number ul li a"); 
links.each(function(index) { 
if(!(this.innerHTML == "上一页" || this.innerHTML == "下一页")) { 
$(this).click(function(event) { 
alert(links[index].innerHTML); 
loadData(curTaskId,"","",parseInt(links[index].innerHTML)); 
pagination(pageCount, parseInt(links[index].innerHTML), container, loadData); 
}); 
} 
}); 
var prevPage = $("#prevpage"); 
var nextPage = $("#nextpage"); 
c.css({'visibility': 'visible'}); 
if(prevPage) { 
prevPage.click(function(event) { 
loadData(curTaskId,"","",currentPage - 1); 
pagination(pageCount, currentPage - 1, container, loadData); 
}); 
} 
if(nextPage) { 
nextPage.click(function(event) { 
loadData(curTaskId,"","",currentPage + 1); 
pagination(pageCount, currentPage + 1, container, loadData); 
}); 
} 
}

loadData为加载数据的函数,这个函数需要定义一个当前页数的参数,比如:
var currentPage = 1; 
loadExamList(currentPage){ 
//TODO 
pagination(5,currentPage,$(ul),loadExamList); 
};

5是总页数,1是当前页数,$(ul)是要将页码按钮存放的位置,loadExamList是点击上一页、下一页或者页码的时候调用的函数。
Javascript 相关文章推荐
javascript 写类方式之八
Jul 05 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
react-native android状态栏的实现
Jun 15 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 #Javascript
javaScript实现浮点数转十六进制字符
Oct 29 #Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 #Javascript
js动态设置div的值下例子
Oct 29 #Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 #Javascript
Js获取数组最大和最小值示例代码
Oct 29 #Javascript
js 遍历json返回的map内容示例代码
Oct 29 #Javascript
You might like
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
javascript知识点收藏
2007/02/22 Javascript
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
python读写json文件的简单实现
2017/04/11 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
全新239军机修复记
2022/04/05 无线电
对讲机知识
2022/04/07 无线电
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS