分享一个JavaScript仿百度分页函数的示例代码
程序员文章站
2022-04-22 18:57:47
...
分享一个JavaScript仿百度分页函数的示例代码
/** * 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(仿微信)实现打飞机游戏的实例代码
-
基于JavaScript实现移动端无限加载分页的示例代码分享
-
分享一个JavaScript仿百度分页函数的示例代码
-
分享一个JavaScript仿百度分页函数的示例代码
-
分享一个封装的javascript事件队列函数代码,解决绑定事件问题
-
分享一个JavaScript(仿微信)实现打飞机游戏的实例代码
-
JS实现仿百度输入框自动匹配功能的示例代码_javascript技巧
-
基于JavaScript实现移动端无限加载分页的示例代码分享
-
分享一个封装的javascript事件队列函数代码,解决绑定事件问题