前言
jqgrid自带分页比较丑,添加一个扩展方法进行分页ui自定义。
一、改造前后对比
改造前:
改造后:
二、使用步骤
1.创建一个扩展方法tlPager
代码如下：
(function(){
$.fn.extend({
// 插件扩展方法名为"tlPager"
"tlPager": function () {
return this.each(function () {
});
}
})
})(jQuery);2.初始化jqgrid时调用
在loadComplete回调里执行$("#jqGrid").tlPager();
代码如下：
loadComplete: function (xhr) {
$("#jqGrid").tlPager();
}三、实现过程
....词穷,直接贴代码看吧
(function(){
$.fn.extend({
// 插件扩展方法名为"tlPager"
"tlPager": function () {
return this.each(function () {
//这里的this 就是 jQuery对象 支持链式调用
var container = $(this);// 获取jquery对象
var model = {};
var eventPrefix = '__pagination-';
var attributes = {
dataSource: '',
showPrevious: true, // 是否显示上一页
showNext: true, // 是否显示下一页
showPageNumbers: true, // 是否显示页码
showNavigator: true,
showSizeChanger: true, // 是否显示切换页条数大小
sizeChangerOptions: container.getGridParam('rowList'), // 页显示数量集合
pageLink: '',
showGoInput: true, // 是否显示跳转输入框
showGoButton: true, // 是否显示跳转按钮
pageNumber: container.getGridParam('page'), // 获取当前页
pageSize: container.getGridParam('rowNum'), // 每页显示条目数
pageRange: 2,
totalNumber: container.getGridParam('records'),// 获取总条数
prevText: '上一页',
nextText: '下一页',
ellipsisText: '...',
goButtonText: '跳转',
pageClassName: '',
activeClassName: 'active',
classPrefix: 'paginationjs',
disableClassName: 'disabled',
ulClassName: 'tl-pager-ul',
prevClassName: 'tl-pager-prerv',
nextClassName: 'tl-pager-next',
formatNavigator: '共 <%= totalNumber %> 条',
formatGoInput: '<%= input %>',
formatGoButton: '<%= button %>',
autoHidePrevious: true, // 当前页面为第一页时自动隐藏上一页按钮
autoHideNext: true, // 当前页面为最后一页时自动隐藏下一页按钮
hideOnlyOnePage: false,
hideFirstOnEllipsisShow: false,
hideLastOnEllipsisShow: false,
header: function (currentPage, totalPage, totalNumber){},
footer:''
};
initialize();
// 初始化
function initialize() {
// 缓存当前实例的数据
if (!container.data('pagination')) {
container.data('pagination', {});
}
// 分页已初始化，请将其销毁
if (container.data('pagination').initialized) {
$('.paginationjs', container).remove();
}
var el = render(true);
model.el = el;
// 向分页元素添加额外的className
if (attributes.className) {
el.addClass(attributes.className);
}
// 通过table找到所对应的pager的div 如果有
var $pagerdiv = container.parents(".ui-jqgrid-view").first().nextAll(".ui-jqgrid-pager").first();
$pagerdiv.remove(); // 删除原来分页的div
// 插入分页dom
//$pagerdiv.prepend(model.el);
container.parents(".ui-jqgrid ").next().remove();
container.parents(".ui-jqgrid ").after(model.el);
// 绑定事件
observer();
}
function render(isBoot) {
var el = $('<div class="paginationjs"></div>');
var isForced = isBoot !== true;
callHook('beforeRender', isForced);
var currentPage = model.pageNumber || attributes.pageNumber;
var pageRange = attributes.pageRange || 0;
var totalPage = getTotalPage();
var rangeStart = currentPage - pageRange;
var rangeEnd = currentPage + pageRange;
if (rangeEnd > totalPage) {
rangeEnd = totalPage;
rangeStart = totalPage - pageRange * 2;
rangeStart = rangeStart < 1 ? 1 : rangeStart;
}
if (rangeStart <= 1) {
rangeStart = 1;
rangeEnd = Math.min(pageRange * 2 + 1, totalPage);
}
el.html('');
el.html(generateHTML({
currentPage: currentPage, // 当前页
pageRange: pageRange, // 页面范围
rangeStart: rangeStart, // 当前页面的范围开始
rangeEnd: rangeEnd // 当前页面的范围结束
}));
// 只有一页时是否隐藏分页
if (attributes.hideOnlyOnePage) {
el[totalPage <= 1 ? 'hide' : 'show']();
}
callHook('afterRender', isForced);
return el;
}
// 跳转到指定页
function go(number, callback) {
var pageNumber = number;
pageNumber = parseInt(pageNumber);
model.direction = typeof model.pageNumber === 'undefined' ? 0 : (pageNumber > model.pageNumber ? 1 : -1);
model.pageNumber = pageNumber;
refreshPageDom();
attributes.pageNumber = pageNumber;
if (!pageNumber || pageNumber < 1) return;
var pageSize = attributes.pageSize;
var totalNumber = getTotalNumber();
var totalPage = getTotalPage();
if (totalNumber > 0 && pageNumber > totalPage) return;
// 执行jqgrid的页面跳转渲染
container.trigger("reloadGrid", [{page: pageNumber}]);
return;
}
// 跳转后刷新分页dom
function refreshPageDom() {
var el = render();
model.el = el;
// 通过table找到所对应的pager的div 如果有
var $pagerdiv = container.parents(".ui-jqgrid-view").first().nextAll(".ui-jqgrid-pager").first();
$pagerdiv.remove(); // 删除原来分页的div
// 插入分页dom
// $pagerdiv.prepend(model.el);
container.parents(".ui-jqgrid ").next().remove();
container.parents(".ui-jqgrid ").after(model.el);
// 添加绑定事件
observer();
}
function callHook(hook) {
var paginationData = container.data('pagination') || {};
var result;
var args = Array.prototype.slice.apply(arguments);
args.shift();
if (attributes[hook] && typeof attributes[hook] === 'function') {
if (attributes[hook].apply(global, args) === false) {
result = false;
}
}
if (paginationData.hooks && paginationData.hooks[hook]) {
$.each(paginationData.hooks[hook], function(index, item) {
if (item.apply(global, args) === false) {
result = false;
}
});
}
return result !== false;
}
function observer() {
var el = model.el;
// 转到指定的页码
container.on(eventPrefix + 'go', function (event, pageNumber, done) {
console.log(event);
console.log(pageNumber);
console.log(done);
// if (typeof pageNumber === 'string') {
// pageNumber = parseInt(pageNumber.trim());
// }
//
// if (!pageNumber) return;
//
// if (typeof pageNumber !== 'number') {
// throwError('"pageNumber" is incorrect. (Number)');
// }
//
// self.go(pageNumber, done);
});
// 页码按钮点击监听
el.on('click', '.J-paginationjs-page', function(event) {
var current = $(event.currentTarget);
var pageNumber = current.attr('data-num').trim();
if (!pageNumber || current.hasClass(attributes.disableClassName) || current.hasClass(attributes.activeClassName)) return;
if (callHook('beforePageOnClick', event, pageNumber) === false) return false;
// 高亮样式控制
current.addClass(attributes.activeClassName).siblings().removeClass(attributes.activeClassName)
// 执行跳转
go(pageNumber);
callHook('afterPageOnClick', event, pageNumber);
if (!attributes.pageLink) return false;
});
// 上一页按钮点击监听
el.on('click', '.J-paginationjs-previous', function(event) {
var current = $(event.currentTarget);
var pageNumber = current.attr('data-num').trim();
if (!pageNumber || current.hasClass(attributes.disableClassName)) return;
if (callHook('beforePreviousOnClick', event, pageNumber) === false) return false;
go(pageNumber);
callHook('afterPreviousOnClick', event, pageNumber);
if (!attributes.pageLink) return false;
});
// 下一页按钮点击监听
el.on('click', '.J-paginationjs-next', function(event) {
var current = $(event.currentTarget);
var pageNumber = current.attr('data-num').trim();
if (!pageNumber || current.hasClass(attributes.disableClassName)) return;
if (callHook('beforeNextOnClick', event, pageNumber) === false) return false;
go(pageNumber);
callHook('afterNextOnClick', event, pageNumber);
if (!attributes.pageLink) return false;
});
// 跳转按钮点击监听
el.on('click', '.J-paginationjs-go-button', function(event) {
var pageNumber = $('.J-paginationjs-go-pagenumber', el).val();
if (callHook('beforeGoButtonOnClick', event, pageNumber) === false) return false;
// container.trigger(eventPrefix + 'go', pageNumber);
go(pageNumber);
callHook('afterGoButtonOnClick', event, pageNumber);
});
// 跳转 input 输入 keyup 监听器
el.on('keyup', '.J-paginationjs-go-pagenumber', function(event) {
if (event.which === 13) {
var pageNumber = $(event.currentTarget).val();
if (callHook('beforeGoInputOnEnter', event, pageNumber) === false) return false;
container.trigger(eventPrefix + 'go', pageNumber);
// 保持光标
$('.J-paginationjs-go-pagenumber', el).focus();
callHook('afterGoInputOnEnter', event, pageNumber);
}
});
// 分页大小下拉选择监听
el.on('change', '.J-paginationjs-size-select', function(event) {
var current = $(event.currentTarget);
var size = parseInt(current.val());
var currentPage = model.pageNumber || attributes.pageNumber;
if (typeof size !== 'number') return;
if (callHook('beforeSizeSelectorChange', event, size) === false) return false;
attributes.pageSize = size;
model.pageSize = size;
model.totalPage = getTotalPage();
if (currentPage > model.totalPage) {
currentPage = model.totalPage;
}
// 刷新jqgrid表格的页显示行数
container.setGridParam({rowNum:size});
go(currentPage);
callHook('afterSizeSelectorChange', event, size);
if (!attributes.pageLink) return false;
});
}
function generateHTML(args){
var currentPage = args.currentPage;
var totalPage = getTotalPage();
var totalNumber = getTotalNumber();
var pageSize = attributes.pageSize;
var showPrevious = attributes.showPrevious;
var showNext = attributes.showNext;
var showPageNumbers = attributes.showPageNumbers;
var showNavigator = attributes.showNavigator;
var showSizeChanger = attributes.showSizeChanger;
var sizeChangerOptions = attributes.sizeChangerOptions;
var showGoInput = attributes.showGoInput;
var showGoButton = attributes.showGoButton;
var prevText = attributes.prevText;
var nextText = attributes.nextText;
var goButtonText = attributes.goButtonText;
var classPrefix = attributes.classPrefix;
var disableClassName = attributes.disableClassName || '';
var ulClassName = attributes.ulClassName || '';
var prevClassName = attributes.prevClassName || '';
var nextClassName = attributes.nextClassName || '';
// console.log("获取当前页-currentPage:"+currentPage);
// console.log("获取最大页数-totalPage:"+totalPage);
// console.log("获取总条数-totalNumber:"+totalNumber);
// console.log("每页显示条目数-pageSize:"+pageSize);
// console.log("页显示数量集合-sizeChangerOptions:"+sizeChangerOptions);
var html = '';
var sizeSelect = `<select class="J-paginationjs-size-select">`;
var goInput = '<input type="text" class="J-paginationjs-go-pagenumber">';
var goButton = `<input type="button" class="J-paginationjs-go-button" value="${goButtonText}">`;
var formattedString;
var formatSizeChanger = typeof attributes.formatSizeChanger === 'function' ? attributes.formatSizeChanger(currentPage, totalPage, totalNumber) : attributes.formatSizeChanger;
var formatNavigator = typeof attributes.formatNavigator === 'function' ? attributes.formatNavigator(currentPage, totalPage, totalNumber) : attributes.formatNavigator;
var formatGoInput = typeof attributes.formatGoInput === 'function' ? attributes.formatGoInput(goInput, currentPage, totalPage, totalNumber) : attributes.formatGoInput;
var formatGoButton = typeof attributes.formatGoButton === 'function' ? attributes.formatGoButton(goButton, currentPage, totalPage, totalNumber) : attributes.formatGoButton;
var autoHidePrevious = typeof attributes.autoHidePrevious === 'function' ? attributes.autoHidePrevious() : attributes.autoHidePrevious;
var autoHideNext = typeof attributes.autoHideNext === 'function' ? attributes.autoHideNext() : attributes.autoHideNext;
var header = typeof attributes.header === 'function' ? attributes.header(currentPage, totalPage, totalNumber) : attributes.header;
var footer = typeof attributes.footer === 'function' ? attributes.footer(currentPage, totalPage, totalNumber) : attributes.footer;
var Helpers = {};
$.each(['Object', 'Array', 'String'], function(index, name) {
Helpers['is' + name] = function(object) {
return getObjectType(object) === name.toLowerCase();
};
});
if (header) {
formattedString = replaceVariables(header, {
currentPage: currentPage,
totalPage: totalPage,
totalNumber: totalNumber
});
html += formattedString;
}
if (showNavigator) {
if (formatNavigator) {
formattedString = replaceVariables(formatNavigator, {
currentPage: currentPage,
totalPage: totalPage,
totalNumber: totalNumber,
rangeStart: (currentPage - 1) * pageSize + 1,
rangeEnd: Math.min(currentPage * pageSize, totalNumber)
});
html += `<div class="${classPrefix}-nav J-paginationjs-nav">${formattedString}</div>`;
}
}
if (showPrevious || showPageNumbers || showNext) {
html += '<div class="paginationjs-pages">';
if (ulClassName) {
html += `<ul class="${ulClassName}">`;
} else {
html += '<ul>';
}
// 显示"上一页"按钮
if (showPrevious) {
if (currentPage <= 1) {
if (!autoHidePrevious) {
html += `<li class="${classPrefix}-prev ${disableClassName} ${prevClassName}"><a>${prevText}</a></li>`;
}
} else {
html += `<li class="${classPrefix}-prev J-paginationjs-previous ${prevClassName}" data-num="${currentPage - 1}" title="Previous page">${getPageLinkTag(prevText)}</li>`;
}
}
// 显示页码
if (showPageNumbers) {
html += generatePageNumbersHTML(args);
}
// 显示"下一页"按钮
if (showNext) {
if (currentPage >= totalPage) {
if (!autoHideNext) {
html += `<li class="${classPrefix}-next ${disableClassName} ${nextClassName}"><a>${nextText}</a></li>`;
}
} else {
html += `<li class="${classPrefix}-next J-paginationjs-next ${nextClassName}" data-num="${currentPage + 1}" title="Next page">${getPageLinkTag(nextText)}</li>`;
}
}
html += `</ul></div>`;
}
if (showSizeChanger) {
if (Helpers.isArray(sizeChangerOptions)) {
if (sizeChangerOptions.indexOf(pageSize) === -1) {
sizeChangerOptions.unshift(pageSize);
sizeChangerOptions.sort((a, b) => a - b);
}
for (let i = 0; i < sizeChangerOptions.length; i++) {
sizeSelect += `<option value="${sizeChangerOptions[i]}"${(sizeChangerOptions[i] === pageSize ? ' selected' : '')}>${sizeChangerOptions[i]} / 页</option>`;
}
sizeSelect += `</select>`;
formattedString = sizeSelect;
if (formatSizeChanger) {
formattedString = replaceVariables(formatSizeChanger, {
length: sizeSelect,
total: totalNumber
});
}
html += `<div class="paginationjs-size-changer">${formattedString}</div>`;
}
}
// 是否显示页跳转输入框
if (showGoInput) {
if (formatGoInput) {
formattedString = replaceVariables(formatGoInput, {
currentPage: currentPage,
totalPage: totalPage,
totalNumber: totalNumber,
input: goInput
});
html += `<div class="${classPrefix}-go-input">${formattedString}</div>`;
}
}
// 是否显示页跳转按钮
if (showGoButton) {
if (formatGoButton) {
formattedString = replaceVariables(formatGoButton, {
currentPage: currentPage,
totalPage: totalPage,
totalNumber: totalNumber,
button: goButton
});
html += `<div class="${classPrefix}-go-button">${formattedString}</div>`;
}
}
// 将额外内容附加到分页按钮
if (footer) {
formattedString = replaceVariables(footer, {
currentPage: currentPage,
totalPage: totalPage,
totalNumber: totalNumber
});
html += formattedString;
}
return html;
}
// 对象类型检测
function getObjectType(object, tmp) {
return ( (tmp = typeof(object)) == "object" ? object == null && "null" || Object.prototype.toString.call(object).slice(8, -1) : tmp ).toLowerCase();
}
function getPagingData(number) {
var pageSize = attributes.pageSize;
var dataSource = attributes.dataSource;
var totalNumber = getTotalNumber();
var start = pageSize * (number - 1) + 1;
var end = Math.min(number * pageSize, totalNumber);
// console.log('分页后数据条数区间范围');
// console.log(start);
// console.log(end);
return dataSource.slice(start - 1, end);
}
function getTotalNumber() {
return attributes.totalNumber || 0;
}
function getTotalPage() {
return Math.ceil(getTotalNumber() / attributes.pageSize);
}
function getPageLinkTag(index) {
var pageLink = attributes.pageLink;
return pageLink ? `<a href="${pageLink}">${index}</a>` : `<a>${index}</a>`;
}
// 为页码生成HTML
function generatePageNumbersHTML(args) {
var currentPage = args.currentPage;
var totalPage = getTotalPage();
//var getPageLinkTag = getPageLinkTag();
var rangeStart = args.rangeStart;
var rangeEnd = args.rangeEnd;
var html = '';
var i;
var ellipsisText = attributes.ellipsisText;
var classPrefix = attributes.classPrefix;
var pageClassName = attributes.pageClassName || '';
var activeClassName = attributes.activeClassName || '';
var disableClassName = attributes.disableClassName || '';
// 如果页面范围被禁用，则显示所有页码
if (attributes.pageRange === null) {
for (i = 1; i <= totalPage; i++) {
if (i == currentPage) {
html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName} ${activeClassName}" data-num="${i}"><a>${i}</a></li>`;
} else {
html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName}" data-num="${i}">${getPageLinkTag(i)}</li>`;
}
}
return html;
}
if (rangeStart <= 3) {
for (i = 1; i < rangeStart; i++) {
if (i == currentPage) {
html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName} ${activeClassName}" data-num="${i}"><a>${i}</a></li>`;
} else {
html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName}" data-num="${i}">${getPageLinkTag(i)}</li>`;
}
}
} else {
if (!attributes.hideFirstOnEllipsisShow) {
html += `<li class="${classPrefix}-page ${classPrefix}-first J-paginationjs-page ${pageClassName}" data-num="1">${getPageLinkTag(1)}</li>`;
}
html += `<li class="${classPrefix}-ellipsis ${disableClassName}"><a>${ellipsisText}</a></li>`;
}
for (i = rangeStart; i <= rangeEnd; i++) {
if (i == currentPage) {
html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName} ${activeClassName}" data-num="${i}"><a>${i}</a></li>`;
} else {
html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName}" data-num="${i}">${getPageLinkTag(i)}</li>`;
}
}
if (rangeEnd >= totalPage - 2) {
for (i = rangeEnd + 1; i <= totalPage; i++) {
html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName}" data-num="${i}">${getPageLinkTag(i)}</li>`;
}
} else {
html += `<li class="${classPrefix}-ellipsis ${disableClassName}"><a>${ellipsisText}</a></li>`;
if (!attributes.hideLastOnEllipsisShow) {
html += `<li class="${classPrefix}-page ${classPrefix}-last J-paginationjs-page ${pageClassName}" data-num="${totalPage}">${getPageLinkTag(totalPage)}</li>`;
}
}
return html;
}
// 替换模板字符串的变量
function replaceVariables(template, variables) {
var formattedString;
for (var key in variables) {
var value = variables[key];
var regexp = new RegExp('<%=\\s*' + key + '\\s*%>', 'img');
formattedString = (formattedString || template).replace(regexp, value);
}
return formattedString;
}
//===========end
});
}
})
})(jQuery);
样式:
.paginationjs {
display:flex;
height: 40px;
justify-content: center;
align-items: center;
line-height:1.6;
font-family:Marmelad,"Lucida Grande",Arial,"Hiragino Sans GB",Georgia,sans-serif;
font-size:14px;
box-sizing:initial
}
.paginationjs:after {
display:table;
content:" ";
clear:both
}
.paginationjs .paginationjs-pages {
float:left;
margin-left:10px
}
.paginationjs .paginationjs-pages ul {
float:left;
margin:0;
padding:0
}
.paginationjs .paginationjs-go-button,.paginationjs .paginationjs-go-input,.paginationjs .paginationjs-size-changer {
margin-left:10px;
float:left;
font-size:14px
}
.paginationjs .paginationjs-pages li {
float:left;
border:1px solid #e6e6e6;
list-style:none;
margin: 0 3px;
border-radius: 3px
}
.paginationjs .paginationjs-pages li>a {
min-width:30px;
height:28px;
line-height:28px;
padding: 0 10px;
display:block;
background:#fff;
font-size:14px;
color:#333;
text-decoration:none;
text-align:center;
cursor:pointer;
border-radius: 3px
}
.paginationjs .paginationjs-pages li>a:hover {
background:#eee
}
.paginationjs .paginationjs-pages li.active {
border:none
}
.paginationjs .paginationjs-pages li.active>a {
height:30px;
line-height:30px;
background:#963131;
color:#fff;
cursor:default
}
.paginationjs .paginationjs-pages li.disabled>a {
opacity:.3;
line-height: 23px;
cursor:no-drop
}
.paginationjs .paginationjs-pages li.disabled>a:hover {
background:0 0
}
/*.paginationjs .paginationjs-pages li:first-child,.paginationjs .paginationjs-pages li:first-child>a {*/
/* border-radius:3px 0 0 3px*/
/*}*/
/*.paginationjs .paginationjs-pages li:last-child {*/
/* border-right:1px solid #aaa;*/
/* border-radius:0 3px 3px 0*/
/*}*/
/*.paginationjs .paginationjs-pages li:last-child>a {*/
/* border-radius:0 3px 3px 0*/
/*}*/
.paginationjs .paginationjs-size-changer>select {
height:28px;
background:#fff;
border-radius:3px;
border:1px solid #e6e6e6;
padding:0;
font-size:14px;
text-align:center;
vertical-align:baseline;
outline:0;
box-shadow:none;
box-sizing:initial
}
.paginationjs .paginationjs-go-input>input[type=text] {
width:30px;
height:28px;
background:#fff;
border-radius:3px;
border:1px solid #e6e6e6;
padding:0;
font-size:14px;
text-align:center;
vertical-align:baseline;
outline:0;
box-shadow:none;
box-sizing:initial
}
.paginationjs .paginationjs-go-button>input[type=button] {
min-width:40px;
height:30px;
line-height:28px;
background:#fff;
border-radius:3px;
border:1px solid #e6e6e6;
text-align:center;
padding:0 8px;
font-size:14px;
vertical-align:baseline;
outline:0;
box-shadow:none;
color:#333;
cursor:pointer;
vertical-align:middle\9
}
.paginationjs .paginationjs-go-button>input[type=button]:hover {
background-color:#f8f8f8
}
.paginationjs .paginationjs-nav {
float:left;
height:30px;
line-height:30px;
font-size:14px
}
.paginationjs.paginationjs-small {
font-size:12px
}
.paginationjs.paginationjs-small .paginationjs-pages li>a {
min-width:26px;
height:24px;
line-height:24px;
font-size:12px
}
.paginationjs.paginationjs-small .paginationjs-pages li.active>a {
height:26px;
line-height:26px
}
.paginationjs.paginationjs-small .paginationjs-size-changer {
font-size:12px
}
.paginationjs.paginationjs-small .paginationjs-size-changer>select {
height:24px;
font-size:12px
}
.paginationjs.paginationjs-small .paginationjs-go-input {
font-size:12px
}
.paginationjs.paginationjs-small .paginationjs-go-input>input[type=text] {
width:26px;
height:24px;
font-size:12px
}
.paginationjs.paginationjs-small .paginationjs-go-button {
font-size:12px
}
.paginationjs.paginationjs-small .paginationjs-go-button>input[type=button] {
min-width:30px;
height:26px;
line-height:24px;
padding:0 6px;
font-size:12px
}
.paginationjs.paginationjs-small .paginationjs-nav {
height:26px;
line-height:26px;
font-size:12px
}
.paginationjs.paginationjs-big {
font-size:16px
}
.paginationjs.paginationjs-big .paginationjs-pages li>a {
min-width:36px;
height:34px;
line-height:34px;
font-size:16px
}
.paginationjs.paginationjs-big .paginationjs-pages li.active>a {
height:36px;
line-height:36px
}
.paginationjs.paginationjs-big .paginationjs-size-changer {
font-size:16px
}
.paginationjs.paginationjs-big .paginationjs-size-changer>select {
height:34px;
font-size:16px
}
.paginationjs.paginationjs-big .paginationjs-go-input {
font-size:16px
}
.paginationjs.paginationjs-big .paginationjs-go-input>input[type=text] {
width:36px;
height:34px;
font-size:16px
}
.paginationjs.paginationjs-big .paginationjs-go-button {
font-size:16px
}
.paginationjs.paginationjs-big .paginationjs-go-button>input[type=button] {
min-width:50px;
height:36px;
line-height:34px;
padding:0 12px;
font-size:16px
}
.paginationjs.paginationjs-big .paginationjs-nav {
height:36px;
line-height:36px;
font-size:16px
}
.paginationjs>:first-child {
margin-left:0
}
.paginationjs.paginationjs-theme-blue .paginationjs-pages li {
border-color:#289de9
}
.paginationjs.paginationjs-theme-blue .paginationjs-pages li>a {
color:#289de9
}
.paginationjs.paginationjs-theme-blue .paginationjs-pages li>a:hover {
background:#e9f4fc
}
.paginationjs.paginationjs-theme-blue .paginationjs-pages li.active>a {
background:#289de9;
color:#fff
}
.paginationjs.paginationjs-theme-blue .paginationjs-pages li.disabled>a:hover {
background:0 0
}
.paginationjs.paginationjs-theme-blue .paginationjs-go-input>input[type=text],.paginationjs.paginationjs-theme-blue .paginationjs-size-changer>select {
border-color:#289de9
}
.paginationjs.paginationjs-theme-blue .paginationjs-go-button>input[type=button] {
background:#289de9;
border-color:#289de9;
color:#fff
}
.paginationjs.paginationjs-theme-blue .paginationjs-go-button>input[type=button]:hover {
background-color:#3ca5ea
}
.paginationjs.paginationjs-theme-green .paginationjs-pages li {
border-color:#449d44
}
.paginationjs.paginationjs-theme-green .paginationjs-pages li>a {
color:#449d44
}
.paginationjs.paginationjs-theme-green .paginationjs-pages li>a:hover {
background:#ebf4eb
}
.paginationjs.paginationjs-theme-green .paginationjs-pages li.active>a {
background:#449d44;
color:#fff
}
.paginationjs.paginationjs-theme-green .paginationjs-pages li.disabled>a:hover {
background:0 0
}
.paginationjs.paginationjs-theme-green .paginationjs-go-input>input[type=text],.paginationjs.paginationjs-theme-green .paginationjs-size-changer>select {
border-color:#449d44
}
.paginationjs.paginationjs-theme-green .paginationjs-go-button>input[type=button] {
background:#449d44;
border-color:#449d44;
color:#fff
}
.paginationjs.paginationjs-theme-green .paginationjs-go-button>input[type=button]:hover {
background-color:#55a555
}
.paginationjs.paginationjs-theme-yellow .paginationjs-pages li {
border-color:#ec971f
}
.paginationjs.paginationjs-theme-yellow .paginationjs-pages li>a {
color:#ec971f
}
.paginationjs.paginationjs-theme-yellow .paginationjs-pages li>a:hover {
background:#fdf5e9
}
.paginationjs.paginationjs-theme-yellow .paginationjs-pages li.active>a {
background:#ec971f;
color:#fff
}
.paginationjs.paginationjs-theme-yellow .paginationjs-pages li.disabled>a:hover {
background:0 0
}
.paginationjs.paginationjs-theme-yellow .paginationjs-go-input>input[type=text],.paginationjs.paginationjs-theme-yellow .paginationjs-size-changer>select {
border-color:#ec971f
}
.paginationjs.paginationjs-theme-yellow .paginationjs-go-button>input[type=button] {
background:#ec971f;
border-color:#ec971f;
color:#fff
}
.paginationjs.paginationjs-theme-yellow .paginationjs-go-button>input[type=button]:hover {
background-color:#eea135
}
.paginationjs.paginationjs-theme-red .paginationjs-pages li {
border-color:#c9302c
}
.paginationjs.paginationjs-theme-red .paginationjs-pages li>a {
color:#c9302c
}
.paginationjs.paginationjs-theme-red .paginationjs-pages li>a:hover {
background:#faeaea
}
.paginationjs.paginationjs-theme-red .paginationjs-pages li.active>a {
background:#c9302c;
color:#fff
}
.paginationjs.paginationjs-theme-red .paginationjs-pages li.disabled>a:hover {
background:0 0
}
.paginationjs.paginationjs-theme-red .paginationjs-go-input>input[type=text],.paginationjs.paginationjs-theme-red .paginationjs-size-changer>select {
border-color:#c9302c
}
.paginationjs.paginationjs-theme-red .paginationjs-go-button>input[type=button] {
background:#c9302c;
border-color:#c9302c;
color:#fff
}
.paginationjs.paginationjs-theme-red .paginationjs-go-button>input[type=button]:hover {
background-color:#ce4541
}
.paginationjs .paginationjs-pages li.paginationjs-next {
border-right:1px solid #aaa\9
}
.paginationjs .paginationjs-size-changer {
margin-left:5px\9
}
.paginationjs .paginationjs-size-changer>select {
line-height:28px\9;
vertical-align:middle\9
}
.paginationjs .paginationjs-go-input {
margin-left:5px\9
}
.paginationjs .paginationjs-go-input>input[type=text] {
line-height:28px\9;
vertical-align:middle\9
}
.paginationjs .paginationjs-go-button {
margin-left:5px\9
}
.paginationjs.paginationjs-big .paginationjs-pages li>a {
line-height:36px\9
}
.paginationjs.paginationjs-big .paginationjs-go-input>input[type=text] {
height:36px\9;
line-height:36px\9
}
总结
提示：比原来默认的好看了些。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
