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

直接上代码吧

css用了bootstrap中分页的样式


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


.pagination > li {
display: inline;
}


.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;
}


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


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


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


.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;
}


.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;
}


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


.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;
}

 

分页代码:

(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>&nbsp;&nbsp;";
}
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分页插件

    点击这里查看效果 这个分页插件使用方便,引用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. @寒冬winter 大神的css作业问题

    块级元素   ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度. ④它可以容纳内联元素和其他块元素 行内级元素   ①和其他元素都在一行 ...

  2. 成功进行了一次UDP打洞

    本次测试参数:服务端是公网固定IP:两个客户端A和B分别位于不同电脑,不同宽带,不同型号路由后面(一个家庭路由,一个企业路由),且路由没有经过特别的设置.测试没有什么特别的地方,只是依照网络资料进行实 ...

  3. 基于dubbo框架下的RPC通讯协议性能测试

    一.前言 Dubbo RPC服务框架支持丰富的传输协议.序列化方式等通讯相关的配置和扩展.dubbo执行一次RPC请求的过程大致如下:消费者(Consumer)向注册中心(Registry)执行RPC ...

  4. 关于history的Linux命令行

    1.使用 HISTTIMEFORMAT 显示时间戳当你从命令行执行 history 命令后,通常只会显示已执行命令的序号和命令本身.如果你想要查看命令历史的时间戳,那么可以执行: # export H ...

  5. Java的算数运算符、关系运算符、逻辑运算符、位运算符

    JAVA的运算符,分为四类: 算数运算符.关系运算符.逻辑运算符.位运算符 算数运算符(9):+  -  *  /  %  ++  -- 关系运算符(6):==  !=  >  >=  & ...

  6. JAVA 获取网页流

    package com.gethtmlContent; import java.io.BufferedReader; import java.io.InputStreamReader; import ...

  7. HTML 5 画布(canvas)

    canvas 元素使用 JavaScript 在网页上绘制图像,本身是没有绘图能力. canvas 是一个矩形区域,可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的 ...

  8. Nginx 和 Apache 开启目录浏览功能

    1.Nginx 在相应项目的 Server 段中的 location 段中,添加 autoindex on.例如: server { listen ; server_name www.dee.prac ...

  9. HTML JQuery 技巧总结

    元素之间的操作 $(".level1").children()  获取到所有相邻的子元素$(".level1").children("a") ...

  10. 自定义NSLog

    我们在调试程序的时候,往往需要输出一些日志信息,用到NSLog函数,当我们准备发布程序,需要注释掉NSLog代码,这个时候往往会定义一个宏,在调试的时候,会输出日志,在Release正式版本的时候,会 ...