对jquery分页的升级

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

直接上代码吧

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>&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分页的升级

时间: 2024-10-03 10:11:32

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

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

5种风格的 jQuery 分页效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>jQuery Pagination - jPaginate</title> <meta http-equi

jquery分页插件

jquery.mypagination.js 文件: /* * * * jquery分页插件 * 1.0  zheng 2014-03-18 * 1.1  兼容url包含#号地址,GoToPage可以指定锚点(特殊需求)2014-04-10 09:00:34 * 1.2  可以配置分页条列出页面数 * 1.3  增加了页面码跳转功能 *  $('#mypage').scPagination(555, { *              pageSize: 10,//每页显示的记录条数 *    

Jquery 分页插件 Jquery Pagination

Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接拿着各种插件用,想偷懒的同学们也可以用用看: Jquery Pagination 大家可以去这里查看下演示:http://www.xuetub.com/plugin/jquery/221 使用方法也比较简单: <div id="pag

无刷新分页代码,jQuery分页完整示例

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery分页演示效果</title><script type="text/javascript" src="/ajaxjs/jquery1.3.2.js">&l

Jquery 分页

分页:可以说是所有做程序的开发者的必须会的,分页有很多种,当然最终还是以业务为需求取决于哪一种方法,下面我介绍的是 SQL语句结合Jquery做的一个Jquery的分页插件,通过个人三年的经验总结的一下东西,不知道是否好用.适用性如何,不过我是用顺手了,如果你觉得好用,谢谢分享下,不好用或者您有什么改进的方法,留言,谢谢知道,不多说 JS做分页首先你得了解下闭包的概念(我在这里也说清楚,自己度娘下) 分页参数:当前页(_PageIndex) .显示条数(_PageSize).总条数(_PageC

Jquery分页功能

Jquery代码 /// <reference path="jquery-1.9.1-vsdoc.js" />//锚点var anchor="#apage";$(function(){    pagerFun();    $("#btnSearch").click(function(){        var name=$.trim($("#txtHospitalName").val());        var

jquery分页组件(每页显示多少条)

/** * 功能说明:jPager 分页插件 * 参数说明:pages:[] 分页的控件个数 @id:显示分页的div ID,@showSelectPage: 是否显示当前分页的条目过滤下拉框 * @currentpage 当前第几页 * @pagesize type:number 每页显示多少条目 * @total type:number 总条数 * @totalpage type:number 总页码数 * */ (function ($) { 'use strict'; $.jPager

可&#8203;根据需求定制的jquery分页

可根据需求定制的jquery分页 本文讲述作者自己用jquery实现的,便于以后使用的分页框架.该分页框架兼容IE,FF,Chrome等主流浏览器,便于移植,可根据需求定制,不需要引入css样式,样式是使用json传入. 1,使用方法: 在需要设置分页的html文件里引入两个文件.一个是jquery.js,另外一个就是jquery.pager.update-1.0.js(这个是核心代码). <script src="jquery.js" type="text/javas

[JQuery]分页插件PageList

虽然已经有了[JQuery]分页插件jQuery pager plugin功能扩展,可惜蛋疼的UI不一样,只能重做一个,唉 基本上与pager类似,只不过跳转方式有所变化,以下是具体的js,其中defaultSettings为相关参数设定,其中要注意的是renderPerCall,这个参数如果设为false,将不执行html重绘 $.fn.pageList = function (arg, methodName) { if (typeof methodName === "string"