当前位置:Gxlcms > JavaScript > 分享一个JavaScript仿百度分页函数的示例代码

分享一个JavaScript仿百度分页函数的示例代码

时间:2021-07-01 10:21:17 帮助过:4人阅读

分享一个JavaScript仿百度分页函数的示例代码

  1. /**
  2. * Ajax分页功能
  3. * 在需要分页的地方添加<ul class="pagination"></ol>
  4. * 作为分页组件容器元素。
  5. * pageCount 总页数
  6. * currentPage 当前页数
  7. * container 带有pagination类的ol容器元素
  8. * loadData 用于加载数据的函数
  9. * version 1.0
  10. */
  11. pagination : function(pageCount, currentPage, container, loadData) {
  12. this.startPage = 1;
  13. this.endPage = pageCount;
  14. this.minDisplayPageCount = 5;
  15. var c = $(container);
  16. var paginationLinks = "";
  17. if(pageCount == 1) {
  18. c.css({'visibility': 'hidden'});
  19. return;
  20. }
  21. if(pageCount > this.minDisplayPageCount + 1) {
  22. if(currentPage - this.minDisplayPageCount > 0) {
  23. this.startPage = currentPage - this.minDisplayPageCount;
  24. }
  25. if((currentPage + this.minDisplayPageCount - 1) < pageCount) {
  26. this.endPage = currentPage + this.minDisplayPageCount - 1;
  27. } else {
  28. this.endPage = pageCount;
  29. }
  30. }
  31. paginationLinks += "<ul>";
  32. if(currentPage != 1) {
  33. paginationLinks += "<li><a id='prevpage' href='javascript:;' rel='prev'>《上一页</a></li>";
  34. }
  35. for(var i = this.startPage; i <= this.endPage; i++) {
  36. if(currentPage == i) {
  37. paginationLinks += "<li id='page_" + currentPage + "_container'><a id='page_" + i + "' class='current' href='javascript:;'>" + currentPage + "</a></li>";
  38. } else {
  39. paginationLinks += "<li id='page_" + i + "_container'><a id='page_" + i + "' href='javascript:;'>" + i + "</a></li>";
  40. }
  41. }
  42. if(currentPage < pageCount) {
  43. paginationLinks += "<li><a id='nextpage' href='javascript:;' rel='next'>下一页》</a></li>";
  44. }
  45. paginationLinks += "</ul>";
  46. c.html(paginationLinks);
  47. var links = $("#page_number ul li a");
  48. links.each(function(index) {
  49. if(!(this.innerHTML == "上一页" || this.innerHTML == "下一页")) {
  50. $(this).click(function(event) {
  51. alert(links[index].innerHTML);
  52. loadData(curTaskId,"","",parseInt(links[index].innerHTML));
  53. pagination(pageCount, parseInt(links[index].innerHTML), container, loadData);
  54. });
  55. }
  56. });
  57. var prevPage = $("#prevpage");
  58. var nextPage = $("#nextpage");
  59. c.css({'visibility': 'visible'});
  60. if(prevPage) {
  61. prevPage.click(function(event) {
  62. loadData(curTaskId,"","",currentPage - 1);
  63. pagination(pageCount, currentPage - 1, container, loadData);
  64. });
  65. }
  66. if(nextPage) {
  67. nextPage.click(function(event) {
  68. loadData(curTaskId,"","",currentPage + 1);
  69. pagination(pageCount, currentPage + 1, container, loadData);
  70. });
  71. }
  72. }

loadData为加载数据的函数,这个函数需要定义一个当前页数的参数,比如:

  1. var currentPage = 1;
  2. loadExamList(currentPage){
  3. //TODO
  4. pagination(5,currentPage,$(ul),loadExamList);
  5. };

5是总页数,1是当前页数,$(ul)是要将页码按钮存放的位置,loadExamList是点击上一页、下一页或者页码的时候调用的函数。

以上就是分享一个JavaScript仿百度分页函数的示例代码 的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行