分享一个JavaScript仿百度分页函数的示例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了分享一个JavaScript仿百度分页函数的示例代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2554字,纯文字阅读大概需要4分钟。
内容图文
![分享一个JavaScript仿百度分页函数的示例代码](/upload/InfoBanner/zyjiaocheng/300/12a2a2eea66e47b197d9c60dc2a8658e.jpg)
/** * 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仿百度分页函数的示例代码 的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的分享一个JavaScript仿百度分页函数的示例代码全部内容,希望文章能够帮你解决分享一个JavaScript仿百度分页函数的示例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。