zoukankan      html  css  js  c++  java
  • 自己写的一个jQuery分页插件

      1 ;(function($){
      2         $.fn.extend({    
      3     pageList: function (json) {
      4         function PageList() {
      5             this.initHtml = ""; //初次加载后的Html
      6             this.num = 0; //页码个数
      7             this.totalPageCount = 0;//总页数
      8             this.size = 0;//每页数据条数
      9             this.hiddenPosition = 3;//省略号的位置
     10             this.fwNotNum = 2; //插件前面的非页码个数
     11             this.fwNotNumHtml = "";//插件前面的非页码html
     12             this.backNotNumHtml = "";//插件后面的非页码html
     13               }
     14       PageList.prototype.init = function (objPageList, json) {
     15           var pageListFunction = this;
     16           objPageList.addClass("pageList");
     17           if (json) {
     18               if (!json.total || isNaN(json.total)) {
     19                   json.total = 1;
     20                   // alert("分页插件total参数异常,插件加载失败");
     21                   //return;
     22               }
     23               if (!json.size || isNaN(json.size)) {
     24                   json.size = 10;
     25               }
     26               if (!json.num || isNaN(json.num) || json.num < 10) {
     27                   json.num = 10;
     28               }
     29               if(!json.ajax){
     30                   json.ajax=function(){};
     31               }
     32           }
     33           var fwNotNumHtml = "<a class='pageList_FirstPage'><label>首页</label></a><a class='pageList_PrevPage'>上页</a>";
     34           var backNotNumHtml = "<a class='pageList_NextPage'>下页</a><a class='pageList_LastPage'>末页</a><input class='jumpNum' type='text' value='' /><a class='jumpText' href='javascript:void(0)'>跳转</a>";
     35           var html = "";
     36           html += fwNotNumHtml;
     37           var totalPageCount = Math.ceil(json.total / json.size);
     38 
     39           if (totalPageCount <= json.num) {
     40               for (var i = 1; i <= totalPageCount; i++) {
     41                   if (i == 1) {
     42                       html += "<a class='pageList_Num pageList_Current'>" + i + "</a>";
     43                       continue;
     44                   }
     45                   html += "<a class='pageList_Num'>" + i + "</a>";
     46               }
     47           }
     48           else {
     49               var hidden = json.num - pageListFunction.hiddenPosition;
     50               for (var i = 1; i <= totalPageCount; i++) {
     51                   if (i == 1) {
     52                       html += "<a class='pageList_Num pageList_Current'>" + i + "</a>";
     53                       continue;
     54                   }
     55                   if (i == hidden) {
     56                       html += "<a class='pageList_Hidden'>...</a>";
     57                       break;
     58                   }
     59                   html += "<a class='pageList_Num'>" + i + "</a>";
     60               }
     61               for (var j = pageListFunction.hiddenPosition - 1; j >= 0; j--) {
     62                   html += "<a class='pageList_Num'>" + (totalPageCount - j) + "</a>";
     63               }
     64           }
     65           html += backNotNumHtml;
     66           objPageList.html(html);
     67           pageListFunction.initHtml = html;
     68           pageListFunction.num = json.num;
     69           pageListFunction.size = json.size;
     70           pageListFunction.totalPageCount = totalPageCount;
     71           pageListFunction.fwNotNumHtml = fwNotNumHtml;
     72           pageListFunction.backNotNumHtml = backNotNumHtml;
     73           pageListFunction.ajax=json.ajax;
     74       }
     75       PageList.prototype.centerPage = function () { return Math.ceil(this.totalPageCount / 2); }
     76       PageList.prototype.limitData = function () { return this.totalPageCount - this.hiddenPosition - 1; }
     77       PageList.prototype.clickA = function (objA, objPageList) {
     78           var pageListFunction = this;
     79           var clickA = 0;
     80           if (objA.hasClass("pageList_Current") || objA.hasClass("pageList_Hidden")) {
     81               return;
     82           }
     83           else if (objA.hasClass("pageList_Num")) {
     84               clickA = parseInt(objA.html());
     85           }
     86           else if (objA.is(".pageList_FirstPage")) {
     87               if (pageListFunction.getCurrentData(objPageList) == 1)
     88                   return;
     89               clickA = 1;
     90           }
     91           else if (objA.is(".pageList_PrevPage")) {
     92                clickA = pageListFunction.getCurrentData(objPageList) - 1;
     93               if (clickA <= 0)
     94                   return;
     95           }
     96           else if (objA.is(".pageList_NextPage")) {
     97                clickA = pageListFunction.getCurrentData(objPageList) + 1;
     98               if (clickA > pageListFunction.totalPageCount)
     99                   return;
    100           }
    101           else if (objA.is(".pageList_LastPage")) {
    102               if (pageListFunction.getCurrentData(objPageList) == pageListFunction.totalPageCount)
    103                   return;
    104               clickA = pageListFunction.totalPageCount;
    105           }
    106           else if (objA.is(".jumpText")||objA.is("input.jumpNum")) {
    107               var clickAtext = $(".jumpNum", objPageList).val();
    108               if (clickAtext == "") return;
    109               clickA = parseInt(clickAtext);
    110               var currentA = pageListFunction.getCurrentData(objPageList);
    111               if (isNaN(clickA)) { return; }
    112               else if (clickA <=0) { return; }
    113               else if (clickA > pageListFunction.totalPageCount) { return; }
    114               else if (clickA == currentA) { return; }
    115           }
    116           pageListFunction.ajax();
    117           pageListFunction.clickNum(clickA, objPageList); 
    118       }
    119       
    120       PageList.prototype.getCurrentData = function (objPageList) { 
    121       return parseInt($("a.pageList_Current",objPageList).html());
    122       }
    123     PageList.prototype.getHiddenFwOrBackData=function(objPageList,type){//返回省略号前面或后面的值
    124     if(type=="fw")
    125     return parseInt($("a.pageList_Hidden",objPageList).prev().html());
    126     else if(type=="back")
    127         return parseInt($("a.pageList_Hidden", objPageList).next().html());    
    128     }
    129     PageList.prototype.hiddenFwOrBackHtml = function (type) {//返回省略号前后的htm页码的html
    130         var html = "";
    131         if (type === "fw") {//省略号在前
    132             for (var i = 1; i <= this.hiddenPosition; i++) {
    133                 html += "<a class='pageList_Num'>" + i + "</a>";
    134             }
    135         }
    136         else if (type === "back") {//省略号在后
    137             for (var j = this.hiddenPosition - 1; j >= 0; j--) {
    138                 html += "<a class='pageList_Num'>" + (this.totalPageCount - j) + "</a>";
    139             }
    140         }
    141         return html;
    142     }
    143     PageList.prototype.addPageList_Current = function (clickNum, objPageList) {
    144         $("a.pageList_Num", objPageList).removeClass("pageList_Current").each(function () {
    145             if (parseInt($(this).html()) == clickNum) {
    146                 $(this).addClass("pageList_Current");
    147             }
    148         });
    149     }
    150     PageList.prototype.getHiddenHtml = function () {
    151         return "<a class='pageList_Hidden'>...</a>";
    152     };
    153     PageList.prototype.newHtml = function (type, objPageList, clickNum) {//返回新的Html,只返回不操作
    154         var pageListFunction = this;
    155         var html = "";
    156         if (type == 1)
    157             html += pageListFunction.initHtml;
    158         else if (type == 2) {
    159             html += pageListFunction.fwNotNumHtml; //首页,第一页
    160             html += pageListFunction.hiddenFwOrBackHtml("fw"); //省略号前的数
    161             html += pageListFunction.getHiddenHtml(); //省略号
    162             var start = pageListFunction.totalPageCount - (pageListFunction.num - pageListFunction.hiddenPosition - 1) + 1;
    163             for (var i = start; i <= pageListFunction.totalPageCount; i++) {
    164                 html += "<a class='pageList_Num'>" + i + "</a>";
    165             }
    166             html += pageListFunction.backNotNumHtml;
    167         }
    168         else if (type == 3) {
    169             clickNum += 1;
    170             html += pageListFunction.fwNotNumHtml;
    171             var start = clickNum - (pageListFunction.num - pageListFunction.hiddenPosition - 1) + 1;
    172             for (var i = start; i <= clickNum; i++) {
    173                 html += "<a class='pageList_Num'>" + i + "</a>";
    174             }
    175             html += pageListFunction.getHiddenHtml();
    176             html += pageListFunction.hiddenFwOrBackHtml("back");
    177             html += pageListFunction.backNotNumHtml;
    178         }
    179         else if (type == 4) {
    180             html += pageListFunction.fwNotNumHtml;
    181             html += pageListFunction.hiddenFwOrBackHtml("fw");
    182             html += pageListFunction.getHiddenHtml();
    183             clickNum -= 1;
    184             var end = pageListFunction.num - pageListFunction.hiddenPosition - 1 + clickNum - 1;
    185             for (var i = clickNum; i <= end; i++) {
    186                 html += "<a class='pageList_Num'>" + i + "</a>";
    187             }
    188             html += pageListFunction.backNotNumHtml;
    189         }
    190         return html;
    191     }
    192     PageList.prototype.clickNum = function (clickNum, objPageList) {
    193         var pageListFunction = this;       
    194         var html = "";
    195         if (pageListFunction.totalPageCount <= pageListFunction.num) {
    196             pageListFunction.addPageList_Current(clickNum, objPageList); return;
    197         }
    198         else if (clickNum <= 5) {
    199             html = pageListFunction.newHtml(1, objPageList);
    200         }
    201         else if (clickNum >= pageListFunction.limitData()) {
    202             html = pageListFunction.newHtml(2, objPageList);
    203         }
    204         else {
    205             if (clickNum < pageListFunction.centerPage())
    206                 html = pageListFunction.newHtml(3, objPageList, clickNum);
    207             else if (clickNum >= pageListFunction.centerPage())
    208                 html = pageListFunction.newHtml(4, objPageList, clickNum);
    209         }
    210         objPageList.html(html);
    211         pageListFunction.addPageList_Current(clickNum, objPageList);
    212     }
    213         var objPageList = $(this);
    214         var p = new PageList();
    215         p.init(objPageList, json, p);        
    216         objPageList.on("click", "a:not('.pageList_Hidden')", function () {
    217             p.clickA($(this), objPageList);
    218         });
    219         objPageList.on("keyup","input.jumpNum",function(event){
    220           if(event.which===13){
    221               p.clickA($(this), objPageList);
    222           }
    223         });
    224     }
    225 });
    226         })(jQuery);
    1 .pageList{ clear:both; overflow:hidden;}
    2     .pageList .pageList_Nums{ float:left;}
    3     .pageList  a{border:1px solid #ccc; margin-left:10px; float:left; display:block; overflow:hidden; padding:3px; font-family:微软雅黑; font-size:12px; min-width:15px; text-align:center; cursor:pointer; height:20px; line-height:20px;}
    4     .pageList  a:hover,.pageList_Current{ background-color:#278DE1;}
    5     .pageList a.pageList_Hidden{ border:none; cursor:default;}
    6     .pageList a.pageList_Hidden:hover{ background-color:transparent;}
    7     .pageList input.jumpNum{ width:30px; border:1px solid #8c8c8c; float:left; width:30px; height:20px; margin-left:5px; line-height:20px; padding:3px; text-align:center;}
    8     .pageList a.jumpText{ border:none;background:none; outline:none; margin-left:0;}

    调用插件:

     1 $(function(){
     2       $("#pagelist").pageList({ total: 1021, num: 10, size: 8,ajax:function(){
     3   $.ajax({
     4                         type: "POST",
     5                         //dataType: "html",
     6                         url: "",
     7                         cache:false,
     8                         //data: { pageStar: pageStar, pageEnd: pageEnd },
     9                         error: function () { },
    10                         success: function (data) {//alert("这里的ajax可以正常执行");
    11                         }
    12                     });
    13           } });
    14 })

    HTML代码:

    1 <div id="pagelist"></div>

     界面效果:

  • 相关阅读:
    scanf使用尿性
    System : Assembly Programming
    Biology 03: Cardiovascular
    remove the smallest element from a linkedlist
    Relativity 04: CH4CH5
    Relativity 03: Space and Time in Classical Mechanics
    146 __str__和__repr__
    145 __init__和__new__
    144 __call__
    143 __doc__
  • 原文地址:https://www.cnblogs.com/guoyansi19900907/p/3585974.html
Copyright © 2011-2022 走看看