简介
近期将原有的生成分页导航的function整理成了一个独立的jQuery插件，使用更简单更方便了，使用插件时可以简单的传入一些参数来启用功能或者修改显示效果。效果如下图所示。插件结构是典型jQuery插件结构，有助于学习jQuery插件开发。兼容IE7及以上浏览器，兼容火狐、谷歌、360、猎豹等主流浏览器。
演示地址：http://www.nllive.cn/sdpagination/
2017-02-09更新，将css文件基于Sass/Scss重写，增加了四种颜色的皮肤
插件代码
css文件
//css文件
@charset "UTF-8";
/*
Copyright (C) Corporation. All rights reserved.
Author : lihaitao
Email : lhtzbj12@126.com
Create Date : 2017-02-09
Description : 分页导航插件
Version : V2.0
Revision History:
Date Author Description
2017-02-09 lihaitao 改成scss,增加蓝色、绿色、橙色、红色皮肤
2016-12-25 lihaitao create
*/
.sdpagination * {
margin: 0;
padding: 0; }
.sdpagination ul {
display: inline-block;
*display: inline;
-webkit-border-radius: 4px;
border-radius: 4px;
*zoom: 1;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
height: 30px;
float: right; }
.sdpagination ul > .active > a, .sdpagination ul > .active a:hover, .sdpagination ul > .active a:focus {
background-color: #f5f5f5;
color: #999;
cursor: default; }
.sdpagination ul > .disabled > a, .sdpagination ul > .disabled > a:hover, .sdpagination ul > .disabled > a:focus {
color: #999;
cursor: default;
background-color: transparent; }
.sdpagination ul > li {
display: inline; }
.sdpagination ul > li > a {
float: left;
text-align: center;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
border-right-width: 0;
font-size: 14px;
color: #0d7dae; }
.sdpagination ul > li > a:hover, .sdpagination ul > li > a:focus {
background-color: #f5f5f5; }
.sdpagination ul > li:first-child > a {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px; }
.sdpagination ul > li:last-child > a {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px; }
/* 前面信息显示的样式*/
.sdpagination .info {
font-size: 14px;
display: inline-block;
height: 30px;
line-height: 30px;
color: #333;
float: left; }
.sdpagination .info .pageSize {
width: 70px;
text-align: left;
font-size: inherit;
height: 24px;
color: inherit; }
/* 后页的input box */
.sdpagination span {
float: left;
padding: 0;
border: 1px solid #ddd;
height: 28px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px; }
.sdpagination span.focus {
border-left: 1px solid #ddd;
border-color: #0d7dae; }
.sdpagination input {
width: 50px;
text-align: center;
color: #0d7dae;
border: none;
margin: 2px 0 0 0;
padding: 0;
height: 24px;
line-height: 24px;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none; }
.sdpagination input:focus {
outline: none;
-webkit-box-shadow: none;
box-shadow: none; }
.sdpagination-large ul {
height: 44px; }
.sdpagination-large ul > li > a {
padding: 11px 19px;
font-size: 18px; }
.sdpagination-large ul > li:first-child > a {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px; }
.sdpagination-large ul > li:last-child > a {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px; }
.sdpagination-large .info {
font-size: 18px;
height: 44px;
line-height: 44px; }
.sdpagination-large span {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
height: 42px; }
.sdpagination-large input {
font-size: 18px;
width: 70px;
height: 40px;
margin-top: 1px;
line-height: 40px; }
.sdpagination-small ul {
height: 25px; }
.sdpagination-small ul > li > a {
padding: 2px 10px;
font-size: 12px; }
.sdpagination-small ul > li:first-child > a {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px; }
.sdpagination-small ul > li:last-child > a {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px; }
.sdpagination-small .info {
font-size: 12px;
height: 26px;
line-height: 26px; }
.sdpagination-small span {
height: 24px; }
.sdpagination-small input {
font-size: 12px;
width: 40px;
height: 20px;
margin-top: 2px;
line-height: 20px; }
.sdpagination-blue ul > .active > a, .sdpagination-blue ul > .active a:hover, .sdpagination-blue ul > .active a:focus {
background-color: #4d90fe;
color: #fff; }
.sdpagination-blue ul > li > a {
color: #4d90fe; }
.sdpagination-blue ul > li > a:hover, .sdpagination-blue ul > li > a:focus {
background-color: #f5f5f5; }
.sdpagination-blue span.focus {
border-color: #4d90fe; }
.sdpagination-blue input {
color: #4d90fe; }
.sdpagination-green ul > .active > a, .sdpagination-green ul > .active a:hover, .sdpagination-green ul > .active a:focus {
background-color: #3cc051;
color: #fff; }
.sdpagination-green ul > li > a {
color: #3cc051; }
.sdpagination-green ul > li > a:hover, .sdpagination-green ul > li > a:focus {
background-color: #f5f5f5; }
.sdpagination-green span.focus {
border-color: #3cc051; }
.sdpagination-green input {
color: #3cc051; }
.sdpagination-orange ul > .active > a, .sdpagination-orange ul > .active a:hover, .sdpagination-orange ul > .active a:focus {
background-color: #ff7a06;
color: #fff; }
.sdpagination-orange ul > li > a {
color: #ff7a06; }
.sdpagination-orange ul > li > a:hover, .sdpagination-orange ul > li > a:focus {
background-color: #f5f5f5; }
.sdpagination-orange span.focus {
border-color: #ff7a06; }
.sdpagination-orange input {
color: #ff7a06; }
.sdpagination-red ul > .active > a, .sdpagination-red ul > .active a:hover, .sdpagination-red ul > .active a:focus {
background-color: #ff3b1b;
color: #fff; }
.sdpagination-red ul > li > a {
color: #ff3b1b; }
.sdpagination-red ul > li > a:hover, .sdpagination-red ul > li > a:focus {
background-color: #f5f5f5; }
.sdpagination-red span.focus {
border-color: #ff3b1b; }
.sdpagination-red input {
color: #ff3b1b; }
JS文件
/********************************************************************************
* Copyright (C) Corporation. All rights reserved.
*
* Author : lihaitao
* Email : lhtzbj12@126.com
* Create Date : 2017-01-19
* Description : 分页导航插件
* Version : V1.4
*
* Revision History:
* Date Author Description
* 2017-01-19 lihaitao 增加了loop属性，上一页下一页无限循环，页数为0时不显示导航，页数为1时不显示首末页上下一页
* 2016-12-29 lihaitao 重新整理调整结构和样式
* 2016-12-26 lihaitao 增加了是否显示首页末页、上一页下一页、快速跳转
* 2016-12-25 lihaitao 独立出来，成为一个完整的插件
* 2016-06-20 lihaitao 为了与boostrap metro 简单兼容
* 2015-09-16 lihaitao create
*
*********************************************************************************
//分页导航插件
//调用实例 #PagerContainer3 为页面里的div
$("#PagerContainer3").sdpagination({
boxClass: "sdpagination", //生成的容器的class，再后面的追加sdpagination-large、sdpagination-small改变大小，追加sdpagination-blue、sdpagination-green、sdpagination-orange、sdpagination-red加载皮肤
totalCount: parseInt('@ViewBag.TotalCount'), //总条数
pageSize: parseInt('@ViewBag.PageSize'), //每页显示
pageIndex: parseInt('@ViewBag.PageIndex'), //当前页数
preText: '上页', //上一页按钮显示的字符
nextText: '下页', //下一页按钮显示的字符
firstText: '首页', //首页按钮显示的字符
lastText: '末页', //末页按钮显示的字符
showNearby: 3, //当前按钮前后按钮数
infoTemplet: '每页{pageSize} 共{totalCount} 当前{pageIndex}/{pageCount}',//自定义信息模板
pageList: [5, 10, 20], //设置PageSize下拉框的选择项，
loop:true, //上一页下一页是否循环
onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页时调用，回调参数为 新页数、PageSize
//页数变化了，该干点啥，
$("#PageIndex").val(pageIndex);
$("#searchForm").submit();
},
onPageSizeChange: function (pageSize) { //回调，当在PageSize下拉框里选择时调用，回调参数为 新PageSize
//pageSize变化了，该干点啥， //注意，分页信息里要显示PageSize的值，同时设置了onPageSizeChange回调时，才会出现PageSize下拉框
$("#PageIndex").val(1);
$("#PageSize").val(pageSize);
$("#searchForm").submit();
},
onPageIndexOutOfRange:function(pageIndex,pageCount){//回调，当pageIndex>pageCount或者pageCount>0&&pageIndex=0时调用，回调参数为 pageIndex、pageCount
//pageIndex越界
alert('PageIndex out of Range')
}
});
*/
(function ($) {
var getPageSizeSelect = function (setttings) {
var select = '<select class="pageSize">';
//遍历添加的同时，判断新传入的PageSize是否在pageList里不在则添加
var exists = 0;
for (var i = 0; i < setttings.pageList.length; i++) {
select += '<option value="' + setttings.pageList[i] + '">' + setttings.pageList[i] + '</option>';
if (setttings.pageList[i] === setttings.pageSize)
exists = 1;
}
if (exists === 0) {
select += '<option value="' + setttings.pageSize + '">' + setttings.pageSize + '</option>';
}
select += '</select>';
return select;
};
///拼接 信息显示区的代码
var getInfoHtml = function (settings) {
var pageSizeObj = settings.pageSize;
//如果传入了onPageSizeChange回调
if (typeof (settings.onPageSizeChange) !== 'undefined') {
pageSizeObj = getPageSizeSelect(settings);
}
//拼接信息显示
return settings.infoTemplet.replace('{pageSize}', pageSizeObj).replace('{totalCount}', settings.totalCount).replace('{pageIndex}', settings.pageIndex).replace('{pageCount}', settings.pageCount);
}
///拼接 首页、上一页的代码
var getFirstPreHtml = function (settings) {
var html = '';
if (settings.pageIndex > 1) {
//如果设置显示首页末页
if (settings.showFirstLast && settings.pageCount > 1) {
html += '<li><a data-pageNum="1" >' + settings.firstText + '</a></li>';
}
//如果设置显示上一页、下一页
if (settings.showPreNext && settings.pageCount>1) {
html += '<li><a data-pageNum="' + (settings.pageIndex - 1) + '" >' + settings.preText + '</a></li>';
}
//如果设置不显示首页末页，且pageCount>0,则显示数字1
if (!settings.showFirstLast && settings.pageCount > 0) {
html += '<li><a data-pageNum="1" >1</a></li>';
}
}
else {
//如果设置显示首页末页
if (settings.showFirstLast && settings.pageCount > 1)
html += '<li class="disabled"><a>' + settings.firstText + '</a></li>';
//如果设置显示上一页、下一页
if (settings.showPreNext && settings.pageCount > 1) {
if (settings.loop == true) {
html += '<li><a data-pageNum="' + settings.pageCount + '">' + settings.preText + '</a></li>';
} else {
html += '<li class="disabled"><a>' + settings.preText + '</a></li>';
}
}
//如果设置不显示首页末页，且pageCount>0 则显示数字1，特例pageCount==1，而pageIndex=0时不显示
if (!settings.showFirstLast && settings.pageCount > 0 && !(settings.pageCount === 1 && settings.pageIndex === 0)) {
html += '<li class="';
//并判断pageIndex是否就是数字1,如果当前是1，则class=active
if (settings.pageIndex === 1) {
html += 'active';
}
else {
html += 'disabled';
}
html += '"><a>1</a></li>';
}
}
return html;
}
//拼接中间数字按钮 ...2 3 4 5 6....
var getAButtonsHtml = function (settings) {
var html = '';
//省略号只显示一次，这里声明两个标识
var preFlag = false;
var nextFlag = false;
//如果不显示首页末页按钮，则1和pageCount是始终显示的，因此遍历的范围为2~pageCount - 1
//如果显示了首页末页按钮，则1和pageCount是根据情况显示，因此遍历的范围为1~pageCount
var start = 2;
var end = settings.pageCount - 1;
if (settings.showFirstLast) {
start = 1;
end = settings.pageCount;
}
for (var i = start; i <= end; i++) {
//如果前面的按钮页数与当前差大于showNearby，则显示...
if (settings.pageIndex - i > settings.showNearby && settings.pageIndex - i > 0) {
if (!preFlag) {
html += '<li class="disabled"><a>...</a></li>';
preFlag = true;
}
}
else if (i - settings.pageIndex > settings.showNearby && i - settings.pageIndex > 0 ) {
//如果后面的按钮页数与当前差大于showNearby，则显示...
if (!nextFlag) {
html += '<li class="disabled"><a>...</a></li>';
nextFlag = true;
}
}
else {
if (i !== settings.pageIndex)
html += '<li><a data-pageNum="' + i + '" >' + i + '</a></li>';
else {
html += '<li class="active"><a>' + i + '</a></li>';
}
}
}
return html;
}
///拼接 下一页，末页的代码
var getNextLastHtml = function (settings) {
var html = '';
if (settings.pageIndex < settings.pageCount) {
//如果设置不显示首页末页且pageCount>0,则显示总页数
if (!settings.showFirstLast && settings.pageCount > 0) {
html += '<li><a data-pageNum="' + settings.pageCount + '" >' + settings.pageCount + '</a></li>';
}
//如果设置显示上一页、下一页
if (settings.showPreNext && settings.pageCount > 1) {
html += '<li><a data-pageNum="' + (settings.pageIndex + 1) + '" >' + settings.nextText + '</a></li>';
}
//如果设置显示首页末页
if (settings.showFirstLast && settings.pageCount > 1) {
html += '<li><a data-pageNum="' + settings.pageCount + '" >' + settings.lastText + '</a></li>';
}
}
else {
//如果设置不显示首页末页且总页数大于1，则显示总页数,并判断pageIndex是否就是总页数
if (!settings.showFirstLast && settings.pageCount > 1) {
html += '<li class="';
if (settings.pageIndex > settings.pageCount) {
html += 'disabled';
}
else {
html += 'active';
}
html += '"><a>' + settings.pageCount + '</a></li>';
}
//如果设置显示上一页、下一页
if (settings.showPreNext && settings.pageCount > 1) {
if (settings.loop == true) {
html += '<li><a data-pageNum="1">' + settings.nextText + '</a></li>';
}
else {
html += '<li class="disabled"><a>' + settings.nextText + '</a></li>';
}
}
//如果设置显示首页末页
if (settings.showFirstLast && settings.pageCount > 1) {
html += '<li class="disabled"><a>' + settings.lastText + '</a></li>';
}
}
return html;
}
///拼接整个控件的html代码
var getTotalHtml = function (selector, settings) {
//拼接BOX
var html = '<div class=" ' + settings.boxClass + '">';
html += '<div class=" info">' + getInfoHtml(settings) + '</div><!-- info end -->';
//拼接分页导航
html += '<ul>';
//拼接首页上一页
html += getFirstPreHtml(settings);
//拼接中间数字按钮
html += getAButtonsHtml(settings);
//拼接首页上一页
html += getNextLastHtml(settings);
//如果设置显示快速跳转输入框且pageCount>1
if (settings.showGoInput && settings.pageCount > 1) {
html += '<li><span><input type="text"/></span></li>';
}
html += '</ul>';
//清除浮动
html += '<div style="clear:both;"></div>';
html += '</div><!-- sdpagination end -->';
return html;
};
///设置pageSize下拉里的值，并绑定事件
var pageSizeInit = function (obj, settings) {
//设置pageSize下拦里的值
var pageSize = obj.find(".pageSize");
if (pageSize.length > 0) {
pageSize.find('option[value="' + settings.pageSize + '"]').attr("selected", "selected");
//添加PageSize事件
pageSize.on('change', function () {
var value = $(this).val();
//下拉变化后，修改settings.pageSize ,这个值是可以在其他方法里用的
settings.pageSize = value;
if (settings.onPageSizeChange) {
settings.onPageSizeChange(value);
}
});
}
}
///给每个数字按钮绑定事件
var aBtnInit = function (obj, settings) {
obj.find("a").each(function (i, e) {
var pageIndex = $.trim($(e).attr("data-pageNum"));
if (typeof (pageIndex) !== "undefined" && pageIndex.length>0) {
$(e).on('click', function () {
if (settings.onPageIndexChange) {
settings.onPageIndexChange(pageIndex, settings.pageSize);
}
});
}
});
}
///给GoPage绑定事件
var goPageInit = function (obj, settings) {
var goPage = obj.find('input');
if (goPage.length === 0) {
return;
}
goPage.on('change', function () {
var value = $(this).val();
if (value.length > 0 && /^[1-9]\d*$/.test(value) === true && parseInt(value) <= parseInt(settings.pageCount) && settings.onPageIndexChange) {
settings.onPageIndexChange(value, settings.pageSize);
}
else {
$(this).val("");
}
});
goPage.on('focus', function () {
$(this).closest('span').addClass('focus');
});
goPage.on('blur', function () {
$(this).closest('span').removeClass('focus');
});
}
///插件最外的函数集合，本插件只有一个
var methods = {
init: function (options) {
// 在每个元素上执行方法
return this.each(function () {
var $this = $(this);
//默认的传入参数
var defaults = {
boxClass: "sdpagination", //生成的容器的class，再后面的追加sdpagination-large、sdpagination-small改变大小，追加sdpagination-blue、sdpagination-green、sdpagination-orange、sdpagination-red加载皮肤
totalCount: 0, //总数据条数
pageSize: 10, //每页显示多少条
pageList: [5, 10, 20, 100, 200], //PageSize下拉可选
pageIndex: 1, //当前第几页
showNearby: 4, //显示前页数附近页数时的差，比如 ShowNearby=4，当当前页数是7，那么显示 ...3 4 5 6 7 8 9 10 11...
preText: '<', //默认的上一页
nextText: '>', //默认的下一页
firstText: '<<', //默认的第一页
lastText: '>>', //默认的最后一页
infoTemplet: '共{totalCount}条 当前{pageIndex}/{pageCount}页 每页显示{pageSize}条',//信息显示的模板
showFirstLast: false, //是否显示首页末页按钮,如果不显示，将始终显示数字1和总页数按钮
showPreNext: true, //是否显示上一页下一页按钮
showGoInput: true, //是否显示快速跳转输入框
loop: true //上一页下一页是否无限循环
};
//将默认值与传入参数合并
var settings = $.extend({}, defaults, options);
//如果传入的pageSize值<1则，附值为10
if (typeof (settings.pageSize) === 'undefined' || settings.pageSize < 1) {
settings.pageSize = 10;
}
//如果传入的pageIndex值<0,则附值为1
if (typeof (settings.pageIndex) === 'undefined' || settings.pageIndex < 0) {
settings.pageIndex = 1;
}
//将值都转成int型，避免传的入值格式不正确
settings.pageIndex = parseInt(settings.pageIndex);
settings.pageSize = parseInt(settings.pageSize);
//计算pageCount
settings.pageCount = parseInt((settings.totalCount + settings.pageSize - 1) / settings.pageSize);
//如果pageCount=0,则将pageIndex附值为0
if (settings.pageCount === 0) {
settings.pageIndex = 0;
}
// 将代码添加到DOM中
$this.html(getTotalHtml($this, settings));
//统一设置a的href属性
$this.find('a').prop('href', 'javascript:;');
//如果pageIndex>pageCount或者pageCount>0而pageIndex==0，则触发pageIndex越界事件
if ((settings.pageIndex > settings.pageCount || (settings.pageCount > 0 && settings.pageIndex === 0)) && settings.onPageIndexOutOfRange) {
settings.onPageIndexOutOfRange(settings.pageIndex, settings.pageCount);
}
///设置pageSize下拉里的值，并绑定事件
pageSizeInit($this, settings);
//给每个a将点击事件
aBtnInit($this, settings);
///给GoPage绑定事件
goPageInit($this, settings);
});
}
};
$.fn.sdpagination = function () {
var method = arguments[0];
var args = arguments;
if (methods[method]) {
method = methods[method];
args = Array.prototype.slice.call(arguments, 1);
} else if (typeof (method) === 'object' || !method) {
method = methods.init;
} else {
$.error('Method ' + method + ' does not exist on jQuery.sdpagination');
return this;
}
return method.apply(this, args);
};
})(jQuery);输入参数
参数表
| 参数名 | 默认值 | 功能 |
|---|---|---|
| boxClass | sdpagination | 生成的容器的class，再后面的追加sdpagination-large、sdpagination-small改变大小，追加sdpagination-blue、sdpagination-green、sdpagination-orange、sdpagination-red加载皮肤 |
| totalCount | 0 | 数据总条数 |
| pageSize | 10 | 每页显示数 |
| pageList | [5, 10, 20, 100, 200] | pageSize下拉框里的选项 |
| pageIndex | 1 | 当前页数 |
| showNearby | 4 | 显示前页数附近页数时的差，比如：值4，当前页数是7，那么显示 …3 4 5 6 7 8 9 10 11… |
| preText | < | 上一页按钮显示的字符 |
| nextText | > | 下一页按钮显示的字符 |
| firstText | << | 首页按钮显示的字符 |
| lastText | >> | 末页按钮显示的字符 |
| infoTemplet | 每页显示{pageSize}条 共{totalCount}条 当前{pageIndex}/{pageCount}页 | 信息显示的模板，当模板里有{pageSize}并定义onPageSizeChange的回调时，会出现设置pageSize的下拉框 |
| showFirstLast | false | 是否显示首页末页按钮,如果不显示，将始终显示数字1和总页数按钮 |
| showPreNext | true | 是否显示上一页下一页按钮 |
| showGoInput | true | 是否显示快速跳转输入框 |
| loop | true | 上一页下一页是否无限循环 |
回调表
| 参数名 | 回调参数 | 功能 |
|---|---|---|
| onPageIndexChange | pageIndex,pageSize | 点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为:新页数、PageSize |
| onPageSizeChange | pageSize | 当在PageSize下拉框里选择时，onPageSizeChange，回调参数为:新PageSize |
| onPageIndexOutOfRange | pageIndex,pageCount | 当pageIndex>pageCount或者pageCount>0&&pageIndex=0时调用，回调参数为 pageIndex、pageCount |
调用例子
1.最简洁，传入基本参数，其他都使用默认参数
$("#PagerContainer1").sdpagination({
totalCount: parseInt('@ViewBag.TotalCount'), //总条数
pageSize: parseInt('@ViewBag.PageSize'), //每页显示
pageIndex: parseInt('@ViewBag.PageIndex'), //当前页数
onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
//页数变化了，该干点啥，
$("#PageIndex").val(pageIndex);
$("#searchForm").submit();
}
});2.传入基本参数，启用PageSize下拉框及其回调，其他都使用默认参数
$("#PagerContainer2").sdpagination({
totalCount: parseInt('@ViewBag.TotalCount'), //总条数
pageSize: parseInt('@ViewBag.PageSize'), //每页显示
pageIndex: parseInt('@ViewBag.PageIndex'), //当前页数
onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
//页数变化了，该干点啥，
$("#PageIndex").val(pageIndex);
$("#searchForm").submit();
},
onPageSizeChange: function (pageSize) { //回调，当在PageSize下拉框里选择时，onPageSizeChange，回调参数为 新PageSize
//pageSize变化了，该干点啥， //注意，分页信息里要显示PageSize的值，同时设置了onPageSizeChange回调时，才会出现PageSize下拉框
$("#PageIndex").val(1);
$("#PageSize").val(pageSize);
$("#searchForm").submit();
}
});3.设置前一页、下一页、首页、末页按钮的字符、当前页前后按钮数、信息显示的模板、设置PageSize下拉框里的可选项
$("#PagerContainer3").sdpagination({
totalCount: parseInt('@ViewBag.TotalCount'), //总条数
pageSize: parseInt('@ViewBag.PageSize'), //每页显示
pageIndex: parseInt('@ViewBag.PageIndex'), //当前页数
preText: '上页', //上一页按钮显示的字符
nextText: '下页', //下一页按钮显示的字符
firstText: '首页', //首页按钮显示的字符
lastText: '末页', //末页按钮显示的字符
showNearby: 3, //当前按钮前后按钮数
infoTemplet: '每页{pageSize} 共{totalCount} 当前{pageIndex}/{pageCount}',//自定义信息模板
pageList: [5, 10, 20], //设置PageSize下拉框的选择项，
onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
//页数变化了，该干点啥，
$("#PageIndex").val(pageIndex);
$("#searchForm").submit();
},
onPageSizeChange: function (pageSize) { //回调，当在PageSize下拉框里选择时，onPageSizeChange，回调参数为 新PageSize
//pageSize变化了，该干点啥， //注意，分页信息里要显示PageSize的值，同时设置了onPageSizeChange回调时，才会出现PageSize下拉框
$("#PageIndex").val(1);
$("#PageSize").val(pageSize);
$("#searchForm").submit();
}
});4.设置样式 Large（small、mini的使用方方法类似）
$("#PagerContainer4").sdpagination({
boxClass: "sdpagination sdpagination-large",
totalCount: parseInt('@ViewBag.TotalCount'),
pageSize: parseInt('@ViewBag.PageSize'),
pageIndex: parseInt('@ViewBag.PageIndex'),
onPageIndexChange: function (pageIndex) {
//页数变化了，该干点啥，
$("#PageIndex").val(pageIndex);
$("#searchForm").submit();
}
});5.显示首页、末页、上一页、下一页、快速跳转输入框
$("#PagerContainer7").sdpagination({
totalCount: parseInt('@ViewBag.TotalCount'), //总条数
pageSize: parseInt('@ViewBag.PageSize'), //每页显示
pageIndex: parseInt('@ViewBag.PageIndex'), //当前页数
showFirstLast: true, //是否显示首页末页按钮,如果不显示，将始终显示数字1和总页数按钮
showPreNext: true, //是否显示上一页下一页按钮
showGoInput: true, //是否显示快速跳转输入框
onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
//页数变化了，该干点啥，
$("#PageIndex").val(pageIndex);
$("#searchForm").submit();
}
});开源项目地址
2017-02-09更新，代码提交到了http://git.oschina.net/大家可以去这里下载，里面有完整的代码和示例程序源码
http://git.oschina.net/lhtzbj12/jquery-sdpagination.js
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
