Introduction
Compatible avec IE6 + et les navigateurs modernes, il prend en charge plusieurs pages sur la même page.
utiliser
Navigateur
<link rel = "Stylesheet" href = "css / gb-page.css"> <script src = "js / gb-page.js"> </ script>
Pagination normale
Html
<div id = "gbpaging">
Js
gbpaging ({total: 101, paramname: 'p', curpage: getPage ('p', '#'), size: 5, predText: '<', nextText: '>', pageInfo: '<b> {{currentPage}} </ b> / <b> {{totalPages}} </b>', eventtype: '});Une autre page pour la même page
Html
<div id = "paging1"> </div>
Js
gbpaging ({eleid: 'paging1', total: 54, size: 10, pré-text: false, nextText: false, paramname: 'p1', curpage: getPage ('p1', '#'), pageinfo: false, eventType: 'cliquez sur'});Actualiser avec les paramètres
Html
<div id = "ping2"> </div>
Js
gbpaging ({eleid: 'paging2', total: 2500, paramname: 'page', curpage: getPage ('page', '? type = 1 & name = 2 &'), gourl: '? type = 1 & name = 2 & {{n}}'});Fonctions d'assistance
function getPage (pname, autre) {var page = window.location.search.replace (autre + pname + '=', '') || 1; retourner parseInt (page);}Options
Eleid Paging Container, ne prend en charge que l'ID, la valeur par défaut est: «gbpaging»
Total: total des enregistrements
paramname: nom du paramètre de pagination || 'P'
Curpage: numéro de page actuel
Taille: nombre d'enregistrements par page || 10
predText: Copie de page précédente || «Page précédente», la valeur est fausse et non affichée
NextText: 'Copie de la page suivante || La valeur de la «page suivante» est fausse non affichée
PageInfo: Informations de pagination, {{CurrentPage}} Numéro de page actuel, {{TotalPages}} Numéro de page total || Page {{CurrentPage}} actuelle / Page Total {{TotalPages}}, la valeur est fausse non affichée
EventType: mode événement, «cliquez» || 'lien'
gourl: Url de liaison, '? type = 1 & name = 2 & {{n}}' || '', {{n}} est le nom du paramètre de page + la valeur, comme: 'p = 1'
Github
https://github.com/givebest/gb-page
Code complet
/ ** * gb-page.js * @class gbpaging * @see https://github.com/givebest/gb-paging * @author a donné defaultconfig, pagin = {EventType: 'link', curpage: 1, // Taille actuelle de la page: 10, // n paramname par page: 'p', // page de paramètre prévue: 'page précédente', nextText: 'page suivante', pageinfo: 'actuel <b> {{{currentpage}} </ b> pages / total <b> {{totalpages}} Description] * @param {String} id * @return {objet} html [élément html] * / $ = fonction (id) {return document.getElementyid (id); this.getParams (opts); (GBPAGNE ') {Args.Container = $ (GBPAY Defaultconfig.size; DefaultConse html] * @return {[type]} [Description] * / gbpaging.prototype.build = fonction () {var html = []; 0) RETOUR; 1; href = "'+ urlparam + (args.curpage + i) +'"> '+ (args.curpage + i) +' </a> '); href = "'+ urlparam +' 1"> 1 </a> '); args.prevtext + '</a>');} if (args.curpage + 2 <args.pages) {html.push ('<span> ... </span>');} if (args.curpage <args.pages) {html.push ('<a href = "' + urlparam + args.pages + '" '</a>'); args.isnext && html.push ('<a href = "' + urlparam + (args.curpage + 1). Informations à droite if (args.isageinfo) html.push ('<div>' + args.pageinfo.replace ('{{currentpage}}', args.curpage) .replace ('{{totalPages}}', args.pages) + '</ div>'); } / ** * [Événement de liaison] * @return {[type]} [Description] * / gbpaging.prototype.events = function () {var _This = this; if (args.eventype! == 'click') return; e.reTurnValue = false; args = _This.opts; Target.getAttribute (href '). Remplace }); Rès '#' + param + '=';}} / ** * Binding Events to Elements * @param {object} ele html objet * @param {event} événement pour détacher * @param {function} fn funback fund * / function bind (ele, event, fn) {if (typeof advencener == 'function') {ele.adDeventLestener (fnse } else if (ele.attachevent) {ele.attachevent ('on' + événement, fn);}} / ** * Événements non liés à l'événement * @param {objet} ele html objet * @param {event} événement pour disach * @param {function} fn fun funde === 'fonction') {ele.reMoveEventListener (FN, fal, false);} else if (ele.detachevent) {ele.detach ('on' + événement, fn); Hasclass (ele, cls) {if (! ele ||! CLS) return; @param {objet} ele [objet html] * @param {string} cls [className] * / fonction addClass (ele, cls) {if (ele.classlist) {ele.classList.add (cls); [RemoveClass Description] * @param {objet} ele [objet html] * @param {String} CLS [className] * / * Fonction RemoveClass (ele, cls) {if (ele.classlist) {ele.classList.remove (CLS); Regexp ('(^ | // b)' + classname.split ('') .join ('|') + '(// b | $)', 'gi'), '');}} * AMD (@see https://github.com/jashkenas/underscore/blob/master/underscore.js) if (typeof define == 'function' && define.amd) {define ('gb-paging', [], function () {return gbpaging;});