html分页插件大全,前端jquery分页插件推荐

很久没更新文章了，最近项目需要使用前端来做分页，于是找了一款现有的jquery分页插件进行修改了一下，增加了些新功能以及加大了兼容性，其本质其实就是使用$.ajax()方法进行包装，把修改过后的代码贴出来给大家吧(末尾提供下载)

* Version 1.0

* 2015-12-20 by sullivan

* AJAX Pager

/// 辅助方法:格式化字符串

window.stringFormat = function() {

if (arguments.length == 0)

return null;

var str = arguments[0];

for (var i = 1; i < arguments.length; i++) {

var reg = new RegExp('\\{' + (i - 1) + '\\}', 'gm');

str = str.replace(reg, arguments[i]);

}

return str;

}

/// parseURL

window.parseURL = function(url) {

var a = document.createElement('a');

a.href = url;

return {

source: url,

protocol: a.protocol.replace(':', ''),

host: a.hostname,

port: a.port,

query: a.search,

params: (function () {

var ret = {},

seg = a.search.replace(/^\?/, '').split('&'),

len = seg.length, i = 0, s;

for (; i < len; i++) {

if (!seg[i]) { continue; }

s = seg[i].split('=');

ret[s[0]] = s[1];

}

return ret;

})(),

file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],

hash: a.hash.replace('#', ''),

path: a.pathname.replace(/^([^\/])/, '/$1'),

relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],

segments: a.pathname.replace(/^\//, '').split('/')

};

}

;

(function (window, $) {

var ajaxPagerObj = window.ajaxPagerObj = {

opts: {

pageSize: 10,

preText: "上一页",

nextText: "下一页",

firstText: "首页",

lastText: "尾页",

shiftingLeft: 3,

shiftingRight: 3,

preLeast: 2,

nextLeast: 2,

showFirst: true,

showLast: true,

url: "",

type: "POST",

dataType: "JSON",

data: {},

doPage:function(data){

if(!data.pageIndex || !data.pageSize){

//用于页码字段同步，比如：

alert("请在doPage方法里将页码与页长字段同步!，例如:\ndata.Page=data.pageIndex;\ndata.PageSize=data.pageSize;");

console.log("请在doPage方法里将页码与页长字段同步!，例如:\ndata.Page=data.pageIndex;\ndata.PageSize=data.pageSize;");

//data.Page=data.pageIndex;

//data.PageSize=data.pageSize;

}

beforeSend: function(){},

success: function(data){},

complete: function(){},

error: function() {

alert("抱歉,请求出错,请重新请求！");

pageIndex: 1,

totalCount: 0,

totalPage: 0

pagerElement: null,

commonHtmlText: {

spanHtml: "{1}",

pageIndexHtml: "{3}",

rightHtml: " 共 {0} 页，到第页确定",

clearFloatHtml: "

stringEmpty: ""

init: function (obj,op) {

var _self = this;

_self.opts = $.extend({}, _self.opts, op || {});

_self.pagerElement = obj;

_self.doPage(_self.opts.pageIndex, _self.opts.pageSize, _self.opts.data);

return _self.opts;

doPage: function (index, pageSize, data) {

var _self = this;

var dataJson=$.extend(data || {}, {pageIndex: index,pageSize:pageSize || 10})

if(typeof _self.opts.doPage=="function"){

_self.opts.doPage(dataJson);

}

_self.opts.pageIndex=index;

_self.opts.pageSize=pageSize;

_self.opts.data=data;

var returnRequest = $.ajax({

type: _self.opts.type,

data:dataJson ,

dataType: _self.opts.dataType,

url: _self.opts.url,

beforeSend: function (xhr) {

if(returnRequest){

returnRequest.abort();

}

if(typeof _self.opts.beforeSend=="function"){

_self.opts.beforeSend(xhr);

}

error: function (XMLHttpRequest, textStatus, errorThrown) {

if(typeof _self.opts.error=="function"){

_self.opts.error(XMLHttpRequest, textStatus, errorThrown);

}

success: function (data) {

if(typeof _self.opts.success=="function"){

_self.opts.success(data);

//后台返回数据格式：{"total":0,"items":[]}

_self.opts.totalCount =_self.getTotalCount(_self.opts) || data.TotalCount || _self.opts.totalCount;

_self.getTotalPage();

if (_self.opts.totalCount > 0 && _self.opts.pageIndex > 0) {

var pageTextArr = new Array;

_self.createPreAndFirstBtn(pageTextArr);

_self.createIndexBtn(pageTextArr);

_self.createNextAndLastBtn(pageTextArr);

_self.renderHtml(pageTextArr);

}

complete: function (data) {

if(typeof _self.opts.complete=="function"){

_self.opts.complete(data);

}

});

getTotalPage: function() {

var _self = this;

_self.opts.totalPage = Math.ceil(_self.opts.totalCount / _self.opts.pageSize);

getTotalCount: function(opts) {

var _self = this;

return '';

createPreAndFirstBtn: function (pageTextArr) {

var _self = this;

if (_self.opts.pageIndex == 1) {

if (_self.opts.showFirst)

pageTextArr.push(_self.createSpan(_self.opts.firstText, 'disenable'));

pageTextArr.push(_self.createSpan(_self.opts.preText, 'disenable'));

} else {

if (_self.opts.showFirst) {

pageTextArr.push(_self.createIndexText(1, _self.opts.firstText));

}

pageTextArr.push(_self.createIndexText(_self.opts.pageIndex - 1, _self.opts.preText));

}

createNextAndLastBtn: function (pageTextArr) {

var _self = this;

if (_self.opts.pageIndex == _self.opts.totalPage) {

pageTextArr.push(_self.createSpan(_self.opts.nextText, 'disenable'));

if (_self.opts.showLast)

pageTextArr.push(_self.createSpan(_self.opts.lastText, 'disenable'));

} else {

pageTextArr.push(_self.createIndexText(_self.opts.pageIndex + 1, _self.opts.nextText));

if (_self.opts.showLast)

pageTextArr.push(_self.createIndexText(_self.opts.totalPage, _self.opts.lastText));

}

createIndexBtn: function (pageTextArr) {

前：当前页 > 偏移量 + 至少保留 + 1

后：当前页 < 总页码 - 偏移量 - 至少保留

var _self = this;

var shiftingLeftStart = _self.opts.shiftingLeft + _self.opts.preLeast + 1;

var shiftingRightStart = _self.opts.totalPage - _self.opts.shiftingRight - _self.opts.nextLeast - 1;

/*页码*/

if (_self.opts.pageIndex > shiftingLeftStart) {

for (i = 1; i <= _self.opts.preLeast; i++) {