javascript ajax 仿百度分页函数

 更新时间:2013年10月29日 17:51:52   作者:  
百度分页想必大家都知道吧,浏览网页的朋友都应该知道,下面有个小例子使用到了js、ajax等来模仿百度的分页,感兴趣的朋友可以参考下
复制代码 代码如下:

/**
* 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实现日历效果

    这篇文章主要为大家详细介绍了javascript实现日历效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • 微信小程序中添加客服按钮contact-button功能

    微信小程序中添加客服按钮contact-button功能

    这篇文章主要介绍了微信小程序中添加客服按钮contact-button功能,小程序的客服系统,是微信做的非常成功的功能,开发者很容易的实现客服功能
    2018-04-04
  • js实现纯前端的图片预览

    js实现纯前端的图片预览

    这篇文章主要介绍了js实现纯前端的图片预览的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript+html实现前端页面滑动验证

    JavaScript+html实现前端页面滑动验证

    这篇文章主要为大家详细介绍了JavaScript+html实现前端页面滑动验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 如何利用原生JS实时监听input框输入值

    如何利用原生JS实时监听input框输入值

    这篇文章主要介绍了如何利用原生JS实时监听input框输入值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 如何用原生js写一个弹窗消息提醒插件

    如何用原生js写一个弹窗消息提醒插件

    这篇文章主要介绍了用原生js写一个弹窗消息提醒插件,下面小编来和大家一起学习一下
    2019-05-05
  • JavaScript数据扁平化详解

    JavaScript数据扁平化详解

    这篇文章主要为大家介绍了JavaScript数据扁平化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • JavaScript数组中reduce方法的应用详解

    JavaScript数组中reduce方法的应用详解

    JavaScript 中的reduce()方法可以用于将数组元素汇总为单个值,,所以本文为大家整理了一些JavaScript数组中reduce方法的应用,需要的可以参考一下
    2023-07-07
  • JavaScript事件学习小结(二)js事件处理程序

    JavaScript事件学习小结(二)js事件处理程序

    这篇文章主要介绍了JavaScript事件学习小结(二)js事件处理程序的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript 俄罗斯方块游戏实现方法与代码解释

    JavaScript 俄罗斯方块游戏实现方法与代码解释

    这篇文章主要介绍了JavaScript 俄罗斯方块游戏,结合实例形式详细分析了JavaScript 俄罗斯方块游戏原理、实现步骤及相关操作注意事项,需要的朋友可以参考下
    2020-04-04

最新评论