導入
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;}}}）;