function Paging(element, options) { this.element = element; this.options = { pageNum: options.pageNum || 1, totalNum: options.totalNum, totalList: options.totalList, pageRows: options.pageRows, pageSizes: options.pageSizes, callback: options.callback }; this.init(); } Paging.prototype = { constructor: Paging, init: function() { this.createHtml(); this.bindEvent(); }, createHtml: function() { var me = this; var content = []; var pageNum = me.options.pageNum; var totalNum = me.options.totalNum; var totalList = me.options.totalList; var pageRows = me.options.pageRows; var pageSizes = me.options.pageSizes; var selecthtml = "" for (var i = 0; i < pageSizes.length; i++) { if (pageRows == pageSizes[i]) { selecthtml += '' } else { selecthtml += '' } } content.push(" 共 " + totalList + " 条 "); if (totalNum > 6) { if (pageNum < 5) { for (var i = 1; i < 6; i++) { if (pageNum !== i) { content.push(""); } else { content.push(""); } } content.push(". . ."); content.push(""); } else { if (pageNum < totalNum - 3) { for (var i = pageNum - 2; i < pageNum + 3; i++) { if (pageNum !== i) { content.push(""); } else { content.push(""); } } content.push(". . ."); content.push(""); } else { content.push(""); content.push(". . ."); for (var i = totalNum - 4; i < totalNum + 1; i++) { if (pageNum !== i) { content.push(""); } else { content.push(""); } } } } } else { for (var i = 1; i < totalNum + 1; i++) { if (pageNum !== i) { content.push(""); } else { content.push(""); } } } content.push(""); content.push("前往页"); content.push(" 共 " + totalNum + " 页 "); me.element.html(content.join('')); setTimeout(function() { me.dis(); }, 20); }, bindEvent: function() { var me = this; function handleSizeChange(data) { var id = $(data).attr('id'); var num = parseInt($(data).html()); var pageNum = me.options.pageNum; if (id === 'prePage') { if (pageNum !== 1) { me.options.pageNum -= 1; } } else if (id === 'nextPage') { if (pageNum !== me.options.totalNum) { me.options.pageNum += 1; } } else if (id === 'firstPage') { if (pageNum !== 1) { me.options.pageNum = 1; } } else if (id === 'lastPage') { if (pageNum !== me.options.totalNum) { me.options.pageNum = me.options.totalNum; } } else if (id === 'page-sizes') { if (pageNum !== 1) { me.options.pageNum = 1; } } else if (id === 'text') { var val = Number($("#text").val()) if (val < 1 || isNaN(val)) { me.options.pageNum = 1 } else if (val > me.options.totalNum) { me.options.pageNum = me.options.totalNum } else { me.options.pageNum = val } } else { me.options.pageNum = num; } $("#text").val(me.options.pageNum) me.options.pageRows = Number($("#page-sizes").val()) me.createHtml(); if (me.options.callback) { me.options.callback(me.options.pageNum, me.options.pageRows); } } me.element.off('click', 'button'); me.element.on('click', 'button', function() { handleSizeChange(this) }); me.element.off('change', 'select'); me.element.on('change', 'select', function() { handleSizeChange(this) }); me.element.off('change', 'input'); me.element.on('change', 'input', function() { handleSizeChange(this) }); }, dis: function() { var me = this; var pageNum = me.options.pageNum; var totalNum = me.options.totalNum; if (totalNum === 1) { me.element.children('#firstPage, #prePage').prop('disabled', true); me.element.children('#lastPage, #nextPage').prop('disabled', true); } else { if (pageNum === 1) { me.element.children('#firstPage, #prePage').prop('disabled', true); } else if (pageNum === totalNum) { me.element.children('#lastPage, #nextPage').prop('disabled', true); } } } }; $.fn.paging = function(options) { return new Paging($(this), options); };