(function ($) {
function SlickGridPager(dataView, grid, $container) {
// $container.height(50);
var $status;
var $currentPage;
var $allPage;
function init() {
dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
updatePager(pagingInfo);
});
constructPagerUI();
updatePager(dataView.getPagingInfo());
}
function getNavState() {
var cannotLeaveEditMode = !grid.getEditorLock().commitCurrentEdit();
var pagingInfo = dataView.getPagingInfo();
var lastPage = pagingInfo.totalPages - 1;
return {
canGotoFirst: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
canGotoLast: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum != lastPage,
canGotoPrev: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
canGotoNext: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum < lastPage,
canGotoAuto: !cannotLeaveEditMode && pagingInfo.pageSize != 0,
pagingInfo: pagingInfo
}
}
function setPageSize(n) {
var pagingInfo = dataView.getPagingInfo();
if (n == 0) {
n = pagingInfo.totalRows;
}
dataView.setRefreshHints({
isFilterUnchanged: true
});
dataView.setPagingOptions({ pageSize: n });
}
function gotoFirst() {
if (getNavState().canGotoFirst) {
dataView.setPagingOptions({ pageNum: 0 });
}
}
function gotoLast() {
var state = getNavState();
if (state.canGotoLast) {
dataView.setPagingOptions({ pageNum: state.pagingInfo.totalPages - 1 });
}
}
function gotoPrev() {
var state = getNavState();
if (state.canGotoPrev) {
dataView.setPagingOptions({ pageNum: state.pagingInfo.pageNum - 1 });
}
}
function gotoNext() {
var state = getNavState();
if (state.canGotoNext) {
dataView.setPagingOptions({ pageNum: state.pagingInfo.pageNum + 1 });
}
}
function goto(to) {
dataView.setPagingOptions({ pageNum: to });
}
function gotoAuto() {
var state = getNavState();
if (state.canGotoAuto) {
var pagenum = $container.find('.slick-pager-pagination').val() - 1;
if (pagenum >= 0 && pagenum < state.pagingInfo.totalPages) {
dataView.setPagingOptions({ pageNum: pagenum });
}
}
}
function constructPagerUI() {
$container.empty();
const html = `
`
$container.append(html);
$container.find('.btn-prev').on('click', gotoPrev);
$container.find('.btn-next').on('click', gotoNext);
}
function updatePager(pagingInfo) {
var state = getNavState();
const $prev = $container.find('.btn-prev');
if (state.canGotoPrev) {
$prev.removeAttr('disabled');
} else {
$prev.attr('disabled', 'disabled');
}
const $next = $container.find('.btn-next');
if (state.canGotoNext) {
$next.removeAttr('disabled');
} else {
$next.attr('disabled', 'disabled');
}
const $pager = $container.find('ul.el-pager');
$pager.empty();
const pages = [];
if (pagingInfo.totalPages > 7) {
if (pagingInfo.pageNum < 4) {
for (let i = 0; i < 6; i++) {
pages.push(i)
}
pages.push('next');
} else {
pages.push(0);
pages.push('prev');
if ((pagingInfo.totalPages - pagingInfo.pageNum) < 4) {
for (let i = pagingInfo.totalPages - 7; i < pagingInfo.totalPages - 1; i++) {
pages.push(i);
}
} else {
for (let i = pagingInfo.pageNum - 2; i <= pagingInfo.pageNum + 2; i++) {
pages.push(i);
}
pages.push('next');
}
}
pages.push(pagingInfo.totalPages - 1);
} else {
for(let i = 0; i < pagingInfo.totalPages; i++) {
pages.push(i);
}
}
for (let p of pages) {
if (p === 'next') {
$pager.append(``);
continue;
}
if (p === 'prev') {
$pager.append(``);
continue;
}
$pager.append(`${p + 1}`)
}
$container.find('ul.el-pager li.number').off('click').on('click', function() {
goto(Number($(this).text()) - 1);
})
$container.find('ul.el-pager li.btn-quickprev').off('click').on('click', function() {
goto(pagingInfo.pageNum - 5);
}).hover(function() {
$(this).removeClass('el-icon-more').addClass('el-icon-d-arrow-left');
}, function() {
$(this).addClass('el-icon-more').removeClass('el-icon-d-arrow-left');
})
$container.find('ul.el-pager li.btn-quicknext').off('click').on('click', function() {
goto(pagingInfo.pageNum + 5);
}).hover(function() {
$(this).removeClass('el-icon-more').addClass('el-icon-d-arrow-right');
}, function() {
$(this).addClass('el-icon-more').removeClass('el-icon-d-arrow-right');
})
const $total = $container.find('.el-pagination__total');
$total.text(`共 ${pagingInfo.totalRows} 条`);
}
init();
}
// Slick.Controls.Pager
$.extend(true, window, { Slick: { Controls: { Pager: SlickGridPager } } });
})(jQuery);