JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 对jquery分页的升级

对jquery分页的升级

以前写的分页用了好久了,但是分页时除了传页面外有时还要传一些其它参数,以前操作时要把传的参数放到隐藏hidden中,分页时在取出来,这样比较麻烦,今天无事,重新包装了一下


直接上代码吧


css用了bootstrap中分页的样式


  1. .pagination-lg > li:first-child > a,
  2. .pagination-lg > li:first-child > span {
  3.   border-bottom-left-radius: 6px;
  4.   border-top-left-radius: 6px;
  5. }

  6. .pagination-lg > li:last-child > a,
  7. .pagination-lg > li:last-child > span {
  8.   border-top-right-radius: 6px;
  9.   border-bottom-right-radius: 6px;
  10. }

  11. .pagination-sm > li > a,
  12. .pagination-sm > li > span {
  13.   padding: 5px 10px;
  14.   font-size: 12px;
  15. }

  16. .pagination-sm > li:first-child > a,
  17. .pagination-sm > li:first-child > span {
  18.   border-bottom-left-radius: 3px;
  19.   border-top-left-radius: 3px;
  20. }

  21. .pagination-sm > li:last-child > a,
  22. .pagination-sm > li:last-child > span {
  23.   border-top-right-radius: 3px;
  24.   border-bottom-right-radius: 3px;
  25. }

  26. .sr-only {
  27.   position: absolute;
  28.   width: 1px;
  29.   height: 1px;
  30.   padding: 0;
  31.   margin: -1px;
  32.   overflow: hidden;
  33.   clip: rect(0, 0, 0, 0);
  34.   border: 0;
  35. }
复制代码

分页代码:


  1. (function ($) {
  2.     var PageFunc = function PageFunc() { }
  3.     $.PageFunc = function (Total, PageSize, curPageNum, FunUrl,paramStr) {
  4.         if (PageSize == "" || PageSize == null || PageSize == undefined) {
  5.             PageSize = 10;
  6.         }
  7.         if (curPageNum == "" || curPageNum == null || curPageNum == undefined) {
  8.             curPageNum = 1;
  9.         }
  10.         var hasParam=true;
  11.         if (paramStr == "" || paramStr == null || paramStr == undefined) {
  12.             hasParam = false;
  13.         }
  14.         //计算总页数
  15.         Total = parseInt(Total); //总记录数
  16.         PageSize = parseInt(PageSize); //每页显示数
  17.         curPageNum = parseInt(curPageNum); //当前页
  18.         //总页数
  19.         var AllPage = Math.floor(Total / PageSize);
  20.         if (Total % PageSize != 0) {
  21.             AllPage++;
  22.         }

  23.         var navHtml = "<ul style='margin:0 0 0 0;' class='pagination'>";

  24.         if (curPageNum <= 0)
  25.             curPageNum = 1;
  26.         if (AllPage > 1) {
  27.             if (curPageNum != 1) {
  28.                 //处理首页连接  
  29.                 var home=1;
  30.                 if(hasParam)
  31.                 {
  32.                     home=home+","+paramStr;
  33.                 }
  34.                 navHtml += "<li><a href='javascript:" + FunUrl + "("+home+")' >|<</a></li>";
  35.             }
  36.             if (curPageNum > 1) {
  37.                 var previous=parseInt(parseInt(curPageNum) - 1);
  38.                 if(hasParam)
  39.                 {
  40.                     previous=previous+","+paramStr;
  41.                 }
  42.                 //处理上一页的连接   
  43.                 navHtml += "<li><a href='javascript:"+FunUrl+"("+previous+")' ><<</a></li>";
  44.             }
  45.             else {
  46.                 navHtml += "<li class='disabled'><a><<</a></li>";
  47.             }

  48.             var currint = 5;
  49.             for (var i = 0; i <= 10; i++) {
  50.                 //一共最多显示10个页码,前面5个,后面5个   
  51.                 if ((curPageNum + i - currint) >= 1 && (curPageNum + i - currint) <= AllPage)
  52.                     if (currint == i) {
  53.                         //当前页处理   
  54.                         navHtml += "<li class='active'><a>" + curPageNum + "<span class='sr-only'>(current)</span></a></li>";
  55.                     }
  56.                     else {
  57.                         //一般页处理   
  58.                         var n = parseInt(parseInt(curPageNum) + parseInt(i) - parseInt(currint));
  59.                         var nstr=n;
  60.                         if(hasParam)
  61.                         {
  62.                             nstr=nstr+","+paramStr;
  63.                         }
  64.                         navHtml += "<li><a href='javascript:" + FunUrl + "("+nstr+")'>" + n + "</a></li>";
  65.                     }
  66.             }
  67.             if (curPageNum < AllPage) {
  68.                 //处理下一页的链接   
  69.                 var next=parseInt(parseInt(curPageNum) + 1);
  70.                 if(hasParam)
  71.                 {
  72.                     next=next+","+paramStr;
  73.                 }
  74.                 navHtml += "<li><a href='javascript:" + FunUrl + "("+next+")'>>></a></li>";
  75.             }
  76.             else {
  77.                 navHtml += "<li class='disabled'><a>>></a></li>";
  78.             }

  79.             if (curPageNum != AllPage) {
  80.                 var last=parseInt(AllPage);
  81.                 if(hasParam)
  82.                 {
  83.                     last=last+","+paramStr;
  84.                 }
  85.                 navHtml += "<li><a href='javascript:" + FunUrl + "("+last+")' >>|</a></li>";
  86.             }

  87.         }
  88.        if(parseInt(AllPage)!=0)
  89.         {
  90.           navHtml += "<li><a>" + curPageNum + "/" + AllPage + "</a></li>  ";
  91.         }
  92.         navHtml+="</ul>";
  93.         return navHtml;
  94.     };

  95. })(jQuery);
复制代码

调用方法:
注意:第一参数一定要是当前页的值啊


  1. function aa(curpage,param1,param2){
  2.     if (curpage == "" || curpage == null || curpage == undefined) {
  3.          curpage = 1;
  4.         }
  5.         var pagesize = 5;
  6.         var paramStr="";
  7.         paramStr=param1+","+param2+";
  8.      $.post("/appdefult/apporder",{"categoryId":param1,"name":param2,"curpage":curpage,"pagesize":pagesize},function(mydata){
  9.        var pageHtml= $.PageFunc(mydata.total, pagesize, curpage, "aa",paramStr);
  10.       $(".page").html(pageHtml);
  11.     },"json");

  12. }
复制代码


【对jquery分页的升级】相关文章

1. 对jquery分页的升级

2. jPList – 实现灵活排序和分页功能的 jQuery 插件

3. jQuery图片分组分页插件

4. CSS3制作的分页导航

5. jQuery表单插件jquery.form.js

6. jQuery 基金会发布 jQuery 插件注册网站

7. jQuery Migrate 1.1 发布,jQuery 应用迁移辅助插件

8. jQuery表单验证插件 jQuery.validity

9. 整体把握jQuery -jQuery 的原型关系图

10. 7款很酷的JQuery动画和实用的JQuery应用

本文来源:https://www.51html5.com/a1324.html

点击展开全部

﹝对jquery分页的升级﹞相关内容

「对jquery分页的升级」相关专题

其它栏目

也许您还喜欢