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

44b4ec5710b19632fb6113cd80e268a3.png

很久没更新文章了,最近项目需要使用前端来做分页,于是找了一款现有的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++) {

pageTextArr.push(_self.createIndexText(i, i));

}

pageTextArr.push(_self.createSpan('...'));

for (i = _self.opts.pageIndex - _self.opts.shiftingLeft; i < _self.opts.pageIndex; i++) {

pageTextArr.push(_self.createIndexText(i, i));

}

} else {

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

pageTextArr.push(_self.createIndexText(i, i));

}

}

pageTextArr.push(_self.createSpan(_self.opts.pageIndex, 'current'));

if (_self.opts.pageIndex <= shiftingRightStart) {

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

pageTextArr.push(_self.createIndexText(i, i));

}

pageTextArr.push(_self.createSpan('...'));

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

pageTextArr.push(_self.createIndexText(i, i));

}

} else {

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

pageTextArr.push(_self.createIndexText(i, i));

}

}

},

renderHtml: function (pageTextArr) {

var _self = this;

var pageText = _self.commonHtmlText.stringEmpty;

for (var i = 0; i < pageTextArr.length; i++) {

pageText += pageTextArr[i];

}

_self.pagerElement.html(pageText).append(stringFormat(_self.commonHtmlText.rightHtml, _self.opts.totalPage, _self.opts.pageIndex)).append(_self.commonHtmlText.clearFloatHtml);

},

createSpan: function (text, className) {

var _self = this;

return stringFormat(_self.commonHtmlText.spanHtml, className ? className : _self.commonHtmlText.stringEmpty, text);

},

createIndexText: function (index, text) {

var _self = this;

return stringFormat(_self.commonHtmlText.pageIndexHtml, index, _self.opts.pageSize, JSON.stringify(_self.opts.data), text);

},

jumpToPage: function() {

var _self = this;

var $txtToPager = $("#txtToPager", _self.pagerElement);

var index = parseInt($txtToPager.val());

if (!isNaN(index) && index > 0 && index <= _self.opts.totalPage) {

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

} else {

$txtToPager.focus();

}

}

}

$.fn.ajaxPager = function (option) {

return ajaxPagerObj.init($(this),option);

};

})(window, jQuery);

参考样式

/**pager**/

.ajaxPager-box {

display:inline-block;

padding: 0px 10px;

text-align:center;

font-size:0;

}

.ajaxPager-box span {

display: block;

float: left;

padding: 1px 12px;

margin-right: 4px;

font-size:12px;

}

.ajaxPager-box span.current {

background-color: #eb6906;

color: #FFF;

border: solid 1px #DDD;

}

.ajaxPager-box span.disenable {

color: #CECECE;

background-color: #FFF;

border: solid 1px #DDD;

}

.ajaxPager-box span.text {

padding: 1px 8px;

color: #333;

}

.ajaxPager-box a {

display: block;

float: left;

padding: 1px 12px;

margin-right: 4px;

text-decoration: none;

border: solid 1px #DDD;

color: #666 !important;

font-size:12px;

}

.ajaxPager-box a:active,

.ajaxPager-box a:visited,

.ajaxPager-box a:focus,

.ajaxPager-box a:hover{

border: solid 1px #eb6906;

color: #eb6906 !important;

}

.ajaxPager-box input[type=text] {

padding:0;

border: solid 1px #DDD;

width: 30px;

height: 20px;

line-height: 20px;

float: left;

margin-right: 4px;

margin-bottom:0;

text-align: center;

border-radius:0;

font-size:12px;

color:#555;

}

.ajaxPager-box button {

cursor: pointer;

border: solid 1px #DDD;

height: 22px;

line-height: 20px;

float: left;

margin:1px 0 0 4px;

padding: 1px 12px;

color: #666;

background-color:#EFEFEF;

font-size:12px;

}

.ajaxPager-box button:active,

.ajaxPager-box button:visited,

.ajaxPager-box button:focus,

.ajaxPager-box button:hover{

border: solid 1px #eb6906 !important;

color: #eb6906 !important;

outline:none;

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值