소개
IE6+ 및 최신 브라우저와 호환되며 같은 페이지의 여러 페이지를 지원합니다.
사용
브라우저
<link rel = "Stylesheet"href = "css/gb-paging.css"> <script src = "js/gb-paging.js"> </script>
정상적인 페이지 매김
HTML
<div id = "gbpaging">
JS
gbpingaging ({total : 101, paramname : 'p', curpage : getPage ( 'p', '#'), size : 5, prevtext : '<', nextText : '>', pageInfo : '<b> {currentPage}} </b>/<b> {{tatlepages}} </b>');같은 페이지의 다른 페이지
HTML
<div id = "paging1"> </div>
JS
gbpaging ({eleid : 'paging1', 총 : 54, 크기 : 10, prevtext : false, nextText : false, paramname : 'p1', curpage : getPage ( 'p1', '#'), pageinfo : false, eventType : 'click'});매개 변수로 새로 고침
HTML
<div id = "paging2"> </div>
JS
gbpaging ({eleid : 'paging2', 총 : 2500, paramname : 'page', curpage : getPage ( 'page', '? type = 1 & name = 2 &'), Gourl : '? type = 1 & name = 2 & {{n}}'});도우미 기능
함수 getPage (pname, 기타) {var page = window.location.search.replace (기타 + pname + '=', '') || 1; Parseint 리턴 (페이지);}옵션
Eleid Paging Container는 ID 만 지원하며 기본값은 다음과 같습니다.
총 : 총 기록
Paramname : Pagination 매개 변수 이름 || '피'
CUPAGE : 현재 페이지 번호
크기 : 페이지 당 레코드 수 || 10
prevtext : 이전 페이지 사본 || '이전 페이지', 값은 거짓이며 표시되지 않습니다
NextText : '다음 페이지 사본 || '다음 페이지'값은 거짓이 표시되지 않습니다
PageInfo : Paging Information, {{currentPage}} 현재 페이지 번호, {{TotalPages}} 총 페이지 번호 || current {{currentPage}} page/total {{totalPages}} 페이지, 값은 거짓으로 표시되지 않습니다.
EventType : 이벤트 모드, '클릭'|| '링크'
Gourl : Link URL, '? type = 1 & name = 2 & {{n}}'|| '', {{n}}}은 'p = 1'과 같은 페이지 매개 변수 이름 + 값입니다.
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 ConfiultConfig repault confiGPE} *. defaultConfig = {eventType : 'link', curpage : 1, // 현재 페이지 크기 : 10, // n paramname : 'p', // page number parameter prevtext : 'previous page', nexttext : 'next page', pageinfo : 'current <b> {currentPage}} </b> pages <b> {b> { ^}} / ** * @param {string} id * @return {object} html [html 요소] * / $ = function (return.getElementById (id) {) {if (! getparams (opts); ($('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 || defaultConfig.size; args.paramName = args.paramName || defaultConfig.paramName; args.goUrl = args.goUrl || ''; args.pages = Math.ceil(args.total / args.size || 0); args.isPrev = (args.prevText !== false) ? true : false; args.prevText = args.prevText || defaultConfig.pageInfo} / ** [Paglination html] * @return {[type]} [설명] * / gbping.build = function () {var html = [ ', args); 'gb-hide'; args.curpage == args. + ' ">' + args.curpage + '</a>'); for (var i = 1; i <ii; i ++) {if (args.curpage -i> 1) {html.unshift ( '<a href ="' + urlparam + (args.curpage -i) + ' " + (args.curpage -i) </a); (args.curpage + i <args.pages) {html.push ( '<a href = "' + urlparam + (args.curpage + i)> ' + (args.curpage + i)}} if (args.curpage -2> 1); (args.curpage> 1) {html.unshift ( '<a href = "' + urlparam + '1"> 1 </a>'); args.isprev && html.unshift ( '<a>' + args.prevtext + '</a>'); urlparam + args.pages + ' ">' + args.pages + '</a>'); args.isnext && html.push ( '<a href ="' + urlparam + (args.curpage + 1) + ' ">' + args.nexttext + '</a>'); args.nexttext + '</a>'); args.container.innerhtml = html.join ( '') * [바인딩 이벤트] * [type]} [설명] * / gbpaging.prototype.events () | {args.curpage = target.getAttribute ( 'href'). (args.gourl, args.paramname) '); _this.build ()}; '=')} else {return '#' + param + '=';}}}} *} * @param {object} ele html object * @param {event} 이벤트를 분리합니다 * @param {function} fn callback int ele.addeventListener (이벤트, fn, false) else (ele.attachevent) {ele.attachevent ( 'on' + event, fn)}; Unbind (ele, event, fn) {if (removeeventlistener === 'function') {ele.removeEventListener (event, fn, false); {string} cls classname * @return {boolean} */function hasclass (ele, cls) {if (! ele ||! '(// s | $)'); cls)) ele.classname + = ' + cls}}} * [removeclass description] * @param {object} [@param {string} cls [classname] * / * function removeclass (ele.class) else {ele.classname = ele.classname.replace (새로운 regexp ( '(^| // b)' + classname.split ( '') .join ( '|') + '(// b | $)', 'gi'), '')*/if (window.gbping) {giped) gbping (); return pating.init (opts)}}}} (@see https://github.com/jashkenas). } ());