jqueryページングのアップグレード

以前书いたページ分けには长い时间がかかりましたが、ページ分けにはページ以外にもいくつかのパラメータが渡されることがあります.以前は操作时にパスのパラメータを隠し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);
  
呼び出し方法:
注意:第1パラメータは必ず現在のページの値ですね.
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");



}