js分頁庫:支援跳轉,步進,onclick事件,詳細定製

來源:互聯網
上載者:User

 //window._={};  (function(_){      if (!_) return;      _.pages = function(os){//可以使用name來綁定click事件,再取page/li屬性使用      //console.log(os);          var ops = {              count:0 //記錄數              , page:0 //當前頁              , li:0 //或目前記錄數              , pre:'jsPage' //class,id之類首碼              , side:5 //當前頁左右數字頁個數              , per:5 //每頁條數              , first:'' //顯示首頁(字元)              , last:'' //顯示末頁(字元)              , prev:'' //顯示上頁(字元)              , next:'' //顯示下頁(字元)              , prevg:'' //前節(字元):足夠前移一組,且不是1              , nextg:'' //後節(字元):足夠後移一組,且不是末頁              , url:'javascript:;' //page的url,放置字元*會替換成頁碼              , target:'_self' //頁碼開啟視窗              , jump:'' //跳轉form的action,*替換成輸入頁碼,              , attrs:'' //附加到a標籤上的其它js屬性,如data="11" pid="2" aid="3"          };                var ma = function(p,t,c,a){return '<a ' +(strN0(ops.attrs) ? ops.attrs:'')+ ' href="' +purl(p)+ '" class="' +ops.pre+(c ? c : 'Pages')+ '" target="' +ops.target+ '" page="' +p+ '" li="' +(p*ops.per)+ '" name="' +ops.pre+ 'Pages" title="' +(a ? a : '點擊開啟第' +p+ '頁')+ '">' +(t ? t : p)+ '</a>\n'};          var isset = function(v){return 'undefined' != typeof v;};          var strN0 = function(v){return 'string' == typeof(v) && !/^\s*$/.test(v) ? 1 : 0;};//非Null 字元          for (var o in os)  isset(ops[o]) && (ops[o] = os[o]);          var overp = function(n){return n>ops.maxp ? ops.maxp : n;};//大於最大頁回最大頁          var pages = '';          var p2l = function(p){return p*ops.per};//頁轉記錄數          var purl = function(p){return ops.url.replace('*', p);};//返回頁碼url          (isNaN(ops.per) || ops.per < 1) && (ops.per = 5);          if (isNaN(ops.count) || !ops.count || (ops.count <= ops.per) ) return pages;//只有一頁          ops.maxp = Math.floor(ops.count/ops.per) + (ops.count%ops.per ? 1 : 0);//最大頁              if (0 < ops.li) {              ops.li > ops.count && (ops.li = ops.count);                ops.page = Math.floor(ops.li/ops.per) + (ops.li%ops.per ? 1 :0);//資料位元移轉換成頁,餘+1          } else if (ops.page > 1){                      ops.page > ops.maxp && (ops.page = ops.maxp);              ops.li = ops.page*ops.per;          } else {              ops.li = 0;              ops.page = 1;          }            ops.nums = ops.side*2+1;//總數字頁為*2+1                            if (ops.page > ops.side+1) {//只有前面出現省略時才需要出現              if (strN0(ops.first)) pages += ma(1,ops.first,'first');                           if (strN0(ops.prev)) pages += ma(ops.page-1,ops.prev,'prev');          }                    var prevp = ops.page - ops.nums;          if (strN0(ops.prevg) && prevp > 1 ) pages += ma(prevp,ops.prevg,'prevg');//只有前面出現省略時才需要出現,1已經有首頁不必出現            for  (var fi = ops.side, sidel=sider='',pl=pr=ops.page;fi >0; fi--) {                          if (--pl >= 1)  sidel = ma(pl) + sidel;                        if (++pr <= ops.maxp)  sider += ma(pr);                    }                    pages += sidel + '<a href="javascript:;" target="_self" class="' +ops.pre+ 'Page" title="當前頁頁碼">' +ops.page+ '</a>'+ sider;          var nextp = ops.page + ops.nums;          if (strN0(ops.nextg) && ops.maxp > nextp ) pages += ma(nextp,ops.nextg, 'nextg');//只有後面不顯全                //跳轉          if (strN0(ops.jump) && (ops.page > ops.side || ops.maxp-ops.page >ops.side))              pages += '<form target="' +ops.target+ '" class="' +ops.pre+ 'form" method="POST" onsubmit="'                   + "return (function(t){var i=t.elements[0];i=i.value=i.value.replace(/\\D/g,'');return i>0?t.action='"                   +ops.jump+ "'.replace('*', i):false;})(this);"                  + '">\n'                  + '<input class="' +ops.pre+ 'input" title="輸入合法的頁碼,斷行符號確認跳轉到輸入的頁"/>'                  + '</form>\n';          if (ops.maxp- ops.page > ops.side) {//只有後面不顯全              if (strN0(ops.next)) pages += ma(ops.page+1,ops.next,'next');                         if (strN0(ops.last)) pages += ma(ops.maxp,ops.last, 'last');          }          return pages;      }  })(window._);  //document.body.innerHTML = _.pages({count:13, page:1, per:1, side:1, first:'f', prev:'p', next:'n', last:'l', nextg:'>>>', prevg:'<<<', jump:'http://local.q/?kkkk=*', target:'_blank'});  
 js點擊應用樣本:             //分頁點擊            $('#listsBar a[name="jsPagePages"]').click(function(){                var pid = $(this).attr('pid')*1;                var page = $(this).attr('page')*1;                $('#commentBox' +pid+ ' div.atBoxPage' +pid).hide();//其它全部隱藏                $('#atBoxPage' +pid+ '_' +page).show();//顯示當前頁            });原理分析:頁面中分頁10個,第1頁顯示,其它頁隱藏,每個分頁div的class="atBoxPage+pid",且id='atBoxPage+pid_+page',在1頁點擊2頁,先用類取得所有的10個分頁隱藏,然後用id取得2頁顯示 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.