对jquery分页的升级
以前写的分页用了好久了,但是分页时除了传页面外有时还要传一些其它参数,以前操作时要把传的参数放到隐藏hidden中,分页时在取出来,这样比较麻烦,今天无事,重新包装了一下
直接上代码吧
css用了bootstrap中分页的样式
分页代码:
调用方法:
注意:第一参数一定要是当前页的值啊
直接上代码吧
css用了bootstrap中分页的样式
- .pagination-lg > li:first-child > a,
- .pagination-lg > li:first-child > span {
- border-bottom-left-radius: 6px;
- border-top-left-radius: 6px;
- }
- .pagination-lg > li:last-child > a,
- .pagination-lg > li:last-child > span {
- border-top-right-radius: 6px;
- border-bottom-right-radius: 6px;
- }
- .pagination-sm > li > a,
- .pagination-sm > li > span {
- padding: 5px 10px;
- font-size: 12px;
- }
- .pagination-sm > li:first-child > a,
- .pagination-sm > li:first-child > span {
- border-bottom-left-radius: 3px;
- border-top-left-radius: 3px;
- }
- .pagination-sm > li:last-child > a,
- .pagination-sm > li:last-child > span {
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- }
- .sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- border: 0;
- }
分页代码:
- (function ($) {
- var PageFunc = function PageFunc() { }
- $.PageFunc = function (Total, PageSize, curPageNum, FunUrl,paramStr) {
- if (PageSize == "" || PageSize == null || PageSize == undefined) {
- PageSize = 10;
- }
- if (curPageNum == "" || curPageNum == null || curPageNum == undefined) {
- curPageNum = 1;
- }
- var hasParam=true;
- if (paramStr == "" || paramStr == null || paramStr == undefined) {
- hasParam = false;
- }
- //计算总页数
- Total = parseInt(Total); //总记录数
- PageSize = parseInt(PageSize); //每页显示数
- curPageNum = parseInt(curPageNum); //当前页
- //总页数
- var AllPage = Math.floor(Total / PageSize);
- if (Total % PageSize != 0) {
- AllPage++;
- }
- var navHtml = "<ul style='margin:0 0 0 0;' class='pagination'>";
- if (curPageNum <= 0)
- curPageNum = 1;
- if (AllPage > 1) {
- if (curPageNum != 1) {
- //处理首页连接
- var home=1;
- if(hasParam)
- {
- home=home+","+paramStr;
- }
- navHtml += "<li><a href='javascript:" + FunUrl + "("+home+")' >|<</a></li>";
- }
- if (curPageNum > 1) {
- var previous=parseInt(parseInt(curPageNum) - 1);
- if(hasParam)
- {
- previous=previous+","+paramStr;
- }
- //处理上一页的连接
- navHtml += "<li><a href='javascript:"+FunUrl+"("+previous+")' ><<</a></li>";
- }
- else {
- navHtml += "<li class='disabled'><a><<</a></li>";
- }
- var currint = 5;
- for (var i = 0; i <= 10; i++) {
- //一共最多显示10个页码,前面5个,后面5个
- if ((curPageNum + i - currint) >= 1 && (curPageNum + i - currint) <= AllPage)
- if (currint == i) {
- //当前页处理
- navHtml += "<li class='active'><a>" + curPageNum + "<span class='sr-only'>(current)</span></a></li>";
- }
- else {
- //一般页处理
- var n = parseInt(parseInt(curPageNum) + parseInt(i) - parseInt(currint));
- var nstr=n;
- if(hasParam)
- {
- nstr=nstr+","+paramStr;
- }
- navHtml += "<li><a href='javascript:" + FunUrl + "("+nstr+")'>" + n + "</a></li>";
- }
- }
- if (curPageNum < AllPage) {
- //处理下一页的链接
- var next=parseInt(parseInt(curPageNum) + 1);
- if(hasParam)
- {
- next=next+","+paramStr;
- }
- navHtml += "<li><a href='javascript:" + FunUrl + "("+next+")'>>></a></li>";
- }
- else {
- navHtml += "<li class='disabled'><a>>></a></li>";
- }
- if (curPageNum != AllPage) {
- var last=parseInt(AllPage);
- if(hasParam)
- {
- last=last+","+paramStr;
- }
- navHtml += "<li><a href='javascript:" + FunUrl + "("+last+")' >>|</a></li>";
- }
- }
- if(parseInt(AllPage)!=0)
- {
- navHtml += "<li><a>" + curPageNum + "/" + AllPage + "</a></li> ";
- }
- navHtml+="</ul>";
- return navHtml;
- };
- })(jQuery);
调用方法:
注意:第一参数一定要是当前页的值啊
- function aa(curpage,param1,param2){
- if (curpage == "" || curpage == null || curpage == undefined) {
- curpage = 1;
- }
- var pagesize = 5;
- var paramStr="";
- paramStr=param1+","+param2+";
- $.post("/appdefult/apporder",{"categoryId":param1,"name":param2,"curpage":curpage,"pagesize":pagesize},function(mydata){
- var pageHtml= $.PageFunc(mydata.total, pagesize, curpage, "aa",paramStr);
- $(".page").html(pageHtml);
- },"json");
- }
【对jquery分页的升级】相关文章
1. 对jquery分页的升级
2. jPList – 实现灵活排序和分页功能的 jQuery 插件
4. CSS3制作的分页导航
7. jQuery Migrate 1.1 发布,jQuery 应用迁移辅助插件
8. jQuery表单验证插件 jQuery.validity
本文来源:https://www.51html5.com/a1324.html
上一篇:jQuery插件开发入门
下一篇:13款精彩实用的最新jQuery插件
﹝对jquery分页的升级﹞相关内容
- jQuery表单插件jquery.form.js
- jQuery轻量级补间动画工具库-jQueryTween
- jQuery Migrate 1.1 发布,jQuery 应用迁移辅助插件
- ParamQuery —— 超强的 jQuery 表格插件
- ParamQuery —— 超强的 jQuery 表格插件
- 谷歌升级Google TV,支持Android应用(多图)
- 手机浏览器竞争升级 “核能力”成关键
- UC大战QQ升级,UC优视宣布起诉腾讯,俞永福称忍无可忍
- CM9开工:努力满足更多手机升级4.0系统
- 用户曝从iOS5.0升级到5.0.1后会出现SIM卡不能识别的问题