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

直接上代码吧

css用了bootstrap中分页的样式

  1.  

.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}

  1.  

.pagination > li {
display: inline;
}

  1.  

.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.428571429;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
}

  1.  

.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}

  1.  

.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

  1.  

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
background-color: #eeeeee;
}

  1.  

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
z-index: 2;
color: #ffffff;
cursor: default;
background-color: #428bca;
border-color: #428bca;
}

  1.  

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: #999999;
cursor: not-allowed;
background-color: #ffffff;
border-color: #dddddd;
}

  1.  

.pagination-lg > li > a,
.pagination-lg > li > span {
padding: 10px 16px;
font-size: 18px;
}

  1.  

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

  1.  

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

  1.  

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

  1.  

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

  1.  

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

  1.  

分页代码:

  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.  
  24. var navHtml = "<ul style='margin:0 0 0 0;' class='pagination'>";
  25.  
  26. if (curPageNum <= 0)
  27. curPageNum = 1;
  28. if (AllPage > 1) {
  29. if (curPageNum != 1) {
  30. //处理首页连接
  31. var home=1;
  32. if(hasParam)
  33. {
  34. home=home+","+paramStr;
  35. }
  36. navHtml += "<li><a href='javascript:" + FunUrl + "("+home+")' >|<</a></li>";
  37. }
  38. if (curPageNum > 1) {
  39. var previous=parseInt(parseInt(curPageNum) - 1);
  40. if(hasParam)
  41. {
  42. previous=previous+","+paramStr;
  43. }
  44. //处理上一页的连接
  45. navHtml += "<li><a href='javascript:"+FunUrl+"("+previous+")' ><<</a></li>";
  46. }
  47. else {
  48. navHtml += "<li class='disabled'><a><<</a></li>";
  49. }
  50.  
  51. var currint = 5;
  52. for (var i = 0; i <= 10; i++) {
  53. //一共最多显示10个页码,前面5个,后面5个
  54. if ((curPageNum + i - currint) >= 1 && (curPageNum + i - currint) <= AllPage)
  55. if (currint == i) {
  56. //当前页处理
  57. navHtml += "<li class='active'><a>" + curPageNum + "<span class='sr-only'>(current)</span></a></li>";
  58. }
  59. else {
  60. //一般页处理
  61. var n = parseInt(parseInt(curPageNum) + parseInt(i) - parseInt(currint));
  62. var nstr=n;
  63. if(hasParam)
  64. {
  65. nstr=nstr+","+paramStr;
  66. }
  67. navHtml += "<li><a href='javascript:" + FunUrl + "("+nstr+")'>" + n + "</a></li>";
  68. }
  69. }
  70. if (curPageNum < AllPage) {
  71. //处理下一页的链接
  72. var next=parseInt(parseInt(curPageNum) + 1);
  73. if(hasParam)
  74. {
  75. next=next+","+paramStr;
  76. }
  77. navHtml += "<li><a href='javascript:" + FunUrl + "("+next+")'>>></a></li>";
  78. }
  79. else {
  80. navHtml += "<li class='disabled'><a>>></a></li>";
  81. }
  82.  
  83. if (curPageNum != AllPage) {
  84. var last=parseInt(AllPage);
  85. if(hasParam)
  86. {
  87. last=last+","+paramStr;
  88. }
  89. navHtml += "<li><a href='javascript:" + FunUrl + "("+last+")' >>|</a></li>";
  90. }
  91.  
  92. }
  93. if(parseInt(AllPage)!=0)
  94. {
  95. navHtml += "<li><a>" + curPageNum + "/" + AllPage + "</a></li>&nbsp;&nbsp;";
  96. }
  97. navHtml+="</ul>";
  98. return navHtml;
  99. };
  100.  
  101. })(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.  
  13. }

对jquery分页的升级的更多相关文章

  1. 一个强大的jquery分页插件

    点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

  2. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  3. 简单的JQuery分页代码

    1. [代码][JavaScript]代码      001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

  4. JQuery 分页实现

     JQuery分页实现  css: .liList0 { padding-left:5px;}.liList0 li { width:160px; float:left; display:inline ...

  5. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  6. jQuery 分页插件 jqPagination的使用

    jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...

  7. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  8. jquery 分页控件2

    jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...

  9. jquery 分页控件1

    jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...

随机推荐

  1. pod 安装总结

    参考http://code4app.com/article/cocoapods-install-usage http://www.jianshu.com/p/32d9cfb91471 原文:http: ...

  2. a 标签 启用或禁用点击事件

    <a href="#" id="btnAuthCode" class="authCode_btn">获取验证码</a> ...

  3. Memcached: List all keys

    In the general case, there is no way to list all the keys that a memcached instance is storing. You ...

  4. O(n)求1-n的逆元

    转自:http://www.2cto.com/kf/201401/272375.html 新学的一个求逆元的方法: inv[i] = ( MOD - MOD / i ) * inv[MOD%i] % ...

  5. Android-adb指令

    adb概念: adb的全称为Android Debug Bridge(调试桥):通过adb我们可以在Eclipse中方便通过DDMS来调试Android程序.当我们运行Eclipse时ADB进程   ...

  6. ionic 踩过的坑

    内联模板 : script可能你没有注意过,HTML中常用的script标签在AngularJS中被重新定义了: 除了原来的脚本声明功能之外,如果script元素的type属性 定义为text/ng- ...

  7. Java数据校验(Bean Validation / JSR303)

    文档: http://beanvalidation.org/1.1/spec/ API : http://docs.jboss.org/hibernate/beanvalidation/spec/1. ...

  8. Unity字节序问题

    问题 Unity中有些配置信息并不想在发布之后给其他人看到,所以在打包的时候进行了简单的编码处理,然后保存为.bytes类型,读取的时候再进行解码处理.今天遇到的很奇葩的问题是: 如果bytes文件U ...

  9. phpv6_css

    global @charset "utf-8"; /* CSS Document */ /*格式化样式*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3, ...

  10. reg

    <div class="login-module"> <div class="wide c login"> <form id=&q ...