การแนะนำ
เข้ากันได้กับ IE6+ และเบราว์เซอร์ที่ทันสมัยรองรับหลายหน้าในหน้าเดียวกัน
ใช้
เบราว์เซอร์
<link rel = "stylesheet" href = "css/gb-paging.css"> <script src = "js/gb-paging.js"> </script>
การปนเปื้อนปกติ
HTML
<div id = "gbpaging">
JS
gbpaging ({ทั้งหมด: 101, paramname: 'p', curpage: getPage ('p', '#'), ขนาด: 5, prevtext: '<', nextText: '>', pageInfo: '<b> {{currentPage}} </b>/<b>หน้าอื่นสำหรับหน้าเดียวกัน
HTML
<div id = "paging1"> </div>
JS
gbpaging ({eleid: 'paging1', ทั้งหมด: 54, ขนาด: 10, prevtext: false, nexttext: false, paramname: 'p1', curpage: getPage ('p1', '#'), pageinfo: false, eventtype: 'คลิก'});รีเฟรชด้วยพารามิเตอร์
HTML
<div id = "paging2"> </div>
JS
gbpaging ({eleid: 'paging2', ทั้งหมด: 2500, paramname: 'page', curpage: getPage ('หน้า', '? 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 เฉพาะค่าเริ่มต้นคือ: 'GBPaging'
รวม: บันทึกทั้งหมด
Paramname: ชื่อพารามิเตอร์การแบ่งแยก 'P'
Curpage: หมายเลขหน้าปัจจุบัน
ขนาด: จำนวนระเบียนต่อหน้า || 10
Prevtext: หน้าก่อนหน้าคัดลอก || 'หน้าก่อนหน้า' ค่าเป็นเท็จและไม่แสดง
NextText: 'สำเนาหน้าถัดไป || ค่า 'หน้าถัดไป' เป็นเท็จไม่ปรากฏขึ้น
PageInfo: ข้อมูลเพจ, {{CurrentPage}} หมายเลขหน้าปัจจุบัน, {{TotalPages}} หมายเลขหน้าทั้งหมด || ปัจจุบัน {{currentPage}} หน้า/ทั้งหมด {{totalPages}} หน้าค่าจะไม่แสดงเท็จ
EventType: โหมดเหตุการณ์ 'คลิก' || 'ลิงค์'
gourl: ลิงก์ url, '? type = 1 & name = 2 & {{n}}' || '', {{n}} เป็นชื่อพารามิเตอร์หน้า + ค่าเช่น: 'p = 1'
คนอื่น ๆ
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, // ขนาดหน้าปัจจุบัน: 10, // n paramname ต่อหน้า: 'P', // หมายเลขหน้าพารามิเตอร์ PEVTEXT: 'หน้าก่อนหน้า', nextText: 'หน้าถัดไป', หน้าเว็บ: * [$ คำอธิบาย] * @param {String} id * @return {Object} html [องค์ประกอบ HTML] */ $ = function (id) {return document.getElementById (id); this.gaterams (opts); ('gbpaging') {args.container = $ ('gbpaging'); defaultconfig.size; args.isnext = (args. nexttext! {[type]} [คำอธิบาย] */ gbpaging.prototype.build = function () {var html = []; (args.curpage == 1 || args.curpage == args.pages)? i ++) {ถ้า (args.curpage - i> 1) {html.unshift ('<a href = "' + urlparam + (args.curpage - i) + '">' + (args.curpage - i) + '</a>'); urlparam + (args.curpage + i) + '">' + (args.curpage + i) + '</a>');}} ถ้า (args.curpage - 2> 1) {html.unshift ('<span> ... </span>'); + '1 "> 1 </a>'); args.isprev && html.unshift ('<a href ="' + urlparam + (args.curpage - 1) + '">' + args.prevtex (args.curpage + 2 <args.pages) {html.push ('<span> ... </span>'); html.push ('<a href = "' + urlparam + (args.curpage + 1) + '">' + args.nexttext + '</a>'); html.push ('<div>' + args.pageinfo.replace ('{{currentPage}}', args.curpage). regplace ('{{TotalPages}}', args.pages) + '< /div>'); @return {[type]} [คำอธิบาย] */ gbpaging.prototype.events = function () {var _this = this; args = _this.opts; Target.getAttribute ('href'). แทนที่ (parseurl (args.gourl, args.paramname), ''); }; '#' + param + '=';}} / ** * ผูกเหตุการณ์กับองค์ประกอบ * @param {object} ele html object * @param {เหตุการณ์} เหตุการณ์เพื่อแยกออก FN, FALSE); (typeof removeEventListener === 'function') {elemoveeVentListener (เหตุการณ์, fn, false); @return {บูลีน} */ฟังก์ชั่น hasclass (ele, cls) {if (! ele ||! cls) return false; }} / ** * [คำอธิบาย addClass] * @param {Object} Ele [HTML Object] * @param {String} cls [classname] * / ฟังก์ชั่น addclass (ele, cls) {if (ele.classlist) {ele.classlist.add (cls) ' + cls;}} /** * [คำอธิบาย RemoveClass] * @param {Object} Ele [HTML Object] * @param {String} cls [classname] * / / * ฟังก์ชั่น removeclass Ele.className.replace (ใหม่ regexp ('(^| // b)' + classname.split ('') .join ('|') + '(// b | $)', 'gi'), '); paging.init (opts);