導入
IE6+および最新のブラウザと互換性があり、同じページ上の複数のページをサポートしています。
使用
ブラウザ
<link rel = "styleSheet" href = "css/gb-paging.css"> <script src = "js/gb-paging.js"> </script>
通常のページネーション
HTML
<div id = "gbpaging">
JS
gbpaging({total:101、paramname: 'p'、curpage:getpage( 'p'、 '#')、size:5、prevtext: '<'、nexttext: '>'、pageinfo: '<b> {{currentPage}}} </b>/<b> {{cotalpages}} </b>同じページの別のページ
HTML
<div id = "paging1"> </div>
JS
gbpaging({eleid: 'paging1'、合計:54、サイズ:10、prevtext:false、next text:false、paramname: 'p1'、curpage:getpage( 'p1'、 '#')、pageinfo:false、eventtype: 'click'});パラメーターで更新します
HTML
<div id = "paging2"> </div>
JS
gbpaging({eleid: 'paging2'、total:2500、paramname: 'page'、curpage:getpage( 'page'、 '?type = 1&name = 2&')、gourl: '?type = 1&name = 2&{n}}'});ヘルパー機能
function getpage(pname、other){var page = window.location.search.replace(other + pname + '='、 '')|| 1; parseint(page);}を返すオプション
ELEIDページングコンテナ、IDのみをサポートし、デフォルトは次のとおりです。
合計:合計記録
Paramname:ページネーションパラメーター名|| 'p'
curpage:現在のページ番号
サイズ:ページごとのレコード数|| 10
prevtext:前のページコピー|| 「前のページ」、値は虚偽であり、表示されません
次のテキスト: '次のページコピー|| 「次のページ」値はfalse表示されません
PageInfo:ページング情報、{{currentPage}}現在のページ番号、{{TotalPages}}合計ページ番号||現在の{{currentPage}} page/total {{totalpages}}ページ、値はfalseで表示されません
eventType:イベントモード、「クリック」|| 'リンク'
Gourl:link url、 '?type = 1&name = 2&{{n}}' || ''、{{n}}は、次のようなページパラメーター名 +値です。
github
https://github.com/givebest/gb-paging
完全なコード
/** * gb-paging.js * @class gbpaging * @see https://github.com/givebest/gb-paging * @author [email protected] * @(c)2016 **/(function(){var $、defaultconfig、paging = null、args defaultConfig = {eventType: 'link'、curpage:1、// currentページサイズ:10、// nページごとのパラマネーム: 'p'、//ページ番号パラメーターpramoltext: 'pefore page'、pageinfo: 'current <b> {{currentPage}}} </bページ/合計/ ** * [$説明] * @param {string} id * @return {object} html [html要素] * / $ = function {return document.getelementbyid(id)} {!(! this.getparams(); ($('gbpaging')) { args.container = $('gbpaging'); } else { return; } args.eventType = args.eventType || defaultConfig.eventType; args.total = args.total || 0; args.curPage = args.curPage || defaultConfig.curPage; args.size = args.size || defaultconize.paramname || defaultcontext == aguntext. / ** * [Pagination html] * @return {[type]} [説明] * / gbpaging.build = function {var html = []; (args.curpage >>> var ii == || curpage == '</a>'); {html.push( '<a href = "' + urlparam +(args.curpage + i) + ' +(args.curpage + i) +'}}} html.unshift( '<a href = "' + urlparam + '1"> 1 </a>'); html.unshift( '<a>' + args.prevtext + '</a>'); + '">' + args.pages + '</a>'); args.isnext && html.push( '<a href ="' + urlparam +(args.curpage + 1) + '">' + args.nexttext + '</a>');} els {args.isnext && html.push( ' + '</a>') args.container.innerhtml = html.join( ''); ** * @return {[type]} = E.PreventDefault() 「無効」)){args.curpage = target.getattribute( 'href') parseint(args.curpage); url.replace( '{n}}、param +' = '); (addeventlistener == 'function'){ele.addeventlistener(event、fals); @param {function} fn callback function* / /*fnic(ele、event、fn){if(typeof removeventlistener === 'function') hasclass * @param {object} ele html object * @param {string} cls classname {boolean} */ function hasclass {if(!ele ||!cls)return false; ELE.CLASSNAME.MATCH( '(// s |^)' + cls + '(// s | $)')}/** * [@param {object} ele [html object] * @param {string} cls [classname] */function adt class ELE.CLASSLIST.ADD(CLS); if(ele.classlist){ele.classlist.Remove(cls); (windo.gbpaging == undefined){window.gbpaging(opts){paging = gbpaging.init(opts) {define( 'gb-paging'、[]、function(){return gbpaging;}}});