HTML:
JS：
var createBtnItem;
//分页操作
function pageP(pageSum) {
//分页dom模板
function createPage(el) {
var element = $(el);
element.append('');
$(el + " .prev_top_btn").append(
''
);
element.append('');
$(el + " .prev_btn").append(
''
);
element.append('');
element.append('');
$(el + " .next_btn").append(
''
);
element.append(
''
);
$(el + " .next_bottom_btn").append(
''
);
return {
el: el,
html: $(el).html()
};
}
//分页实现逻辑
function setPage(dom, pageData) {
var pageData = pageData,
btnSum, //总页数
pageTotal = pageData.pageTotal; //总条数
pageCurrent = pageData.pageCurrent; //当前页
pageSize = pageSize; //显示条数
// console.log(pageData)
if (pageData == undefined) {
pageData = {};
}
if (pageData.maxBtnNum < 5 || pageData.maxBtnNum == undefined) {
pageData.maxBtnNum = 5;
}
if (pageData.pageCurrent == undefined) {
pageData.pageCurrent = 1;
}
if (pageSize == undefined) {
pageSize = 10;
}
if (pageData.pageTotal == undefined) {
pageData.pageTotal = 0;
}
$(dom.el).html(dom.html);
// var btnSum;
if (pageData.pageTotal < pageSize) {
btnSum = 1;
} else if (pageData.pageTotal % pageSize === 0) {
btnSum = pageData.pageTotal / pageSize;
} else {
btnSum = parseInt(pageData.pageTotal / pageSize) + 1;
}
// console.log('有', btnSum, '页');
var Current = pageData.pageCurrent;
if (Current <= 0) {
Current = 1;
} else if (Current > btnSum) {
Current = btnSum;
}
// console.log('当前第', Current, '页')
function createBtnItem(pageCurrent) {
var _len;
if (pageData.maxBtnNum >= btnSum) {
_len = btnSum;
} else {
_len = pageData.maxBtnNum;
}
// console.log('最多生成', _len, '个按钮')
var minPageNum, maxPageNum;
minPageNum = pageCurrent - parseInt(_len / 2);
maxPageNum = pageCurrent + parseInt(_len / 2);
if (_len % 2 === 0) {
maxPageNum--;
}
if (minPageNum < 1) {
maxPageNum += 1 - minPageNum;
minPageNum = 1;
}
if (maxPageNum > btnSum) {
minPageNum -= maxPageNum - btnSum;
maxPageNum = btnSum;
}
// console.log(minPageNum, maxPageNum)
var html_S = "",
content_html = "";
for (var i = minPageNum; i < maxPageNum + 1; i++) {
if (i == pageCurrent) {
html_S =
'' +
i +
"";
} else {
html_S =
'' +
i +
"";
}
content_html += html_S;
}
$(dom.el + " .page_btn_box").html(content_html);
}
createBtnItem(Current);
setUpbtnState(dom.el, Current);
$(dom.el + " .page_btn_box").on("click", "a.page_common_btn_style", function () {
Current = parseInt($(this).attr("data-pageIndex"));
pageData.change({
Current: Current,
pageSize: pageSize
});
createBtnItem(Current);
setUpbtnState(dom.el, Current);
$(".page-left input").val(Current);
// pageCurrent = Current;
// console.log(Current)
});
$(dom.el).on("click", "a.prev_btn", function () {
if (Current <= 1) {
return;
}
Current -= 1;
pageData.change({
Current: Current,
pageSize: pageSize
});
createBtnItem(Current);
setUpbtnState(dom.el, Current);
$(".page-left input").val(Current);
});
$(dom.el).on("click", "a.prev_top_btn", function () {
if (Current <= 1) {
return;
}
Current = 1;
pageData.change({
Current: Current,
pageSize: pageSize
});
createBtnItem(Current);
setUpbtnState(dom.el, Current);
$(".page-left input").val(Current);
});
$(dom.el).on("click", "a.next_btn", function () {
if (Current >= btnSum) {
return;
}
Current += 1;
pageData.change({
Current: Current,
pageSize: pageSize
});
createBtnItem(Current);
setUpbtnState(dom.el, Current);
$(".page-left input").val(Current);
});
$(dom.el).on("click", "a.next_bottom_btn", function () {
if (Current >= btnSum) {
return;
}
Current = btnSum;
pageData.change({
Current: Current,
pageSize: pageSize
});
createBtnItem(Current);
setUpbtnState(dom.el, Current);
$(".page-left input").val(Current);
});
$(".page-left input").on("keydown", function (e) {
var ev = document.all ? window.event : e;
if (ev.keyCode == 13) {
if (
parseInt($(this).val()) == $(this).val() &&
parseInt($(this).val()) <= parseInt(btnSum) &&
parseInt($(this).val()) > 0
) {
Current = parseInt($(this).val());
pageData.change({
Current: Current,
pageSize: pageSize
});
createBtnItem(Current);
setUpbtnState(dom.el, Current);
} else {
$(this).val(1);
alert("请输入小于等于总页数的正整数");
}
}
});
function setUpbtnState(dom_s, num) {
if (num != 1) {
// 点击图标切换
$(".icon-zuo").addClass("icon-zuo-2");
$(".icon-most-left").addClass("icon-most-left-2");
// console.log($(".icon-zuo")[0])
//点击效果设置
$(".prev_top_btn").addClass("btn_style-2");
$(".prev_btn").addClass("btn_style-2");
} else {
$(".icon-zuo").removeClass("icon-zuo-2");
$(".icon-most-left").removeClass("icon-most-left-2");
// console.log($(".icon-zuo")[0])
$(".prev_top_btn").removeClass("btn_style-2");
$(".prev_btn").removeClass("btn_style-2");
}
if (num == btnSum) {
// 点击图标切换
$(".icon-you").addClass("icon-you-2");
$(".icon-most-right").addClass("icon-most-right-2");
//点击效果设置
$(".next_btn").removeClass("btn_style-2");
$(".next_bottom_btn").removeClass("btn_style-2");
} else {
$(".icon-you").removeClass("icon-you-2");
$(".icon-most-right").removeClass("icon-most-right-2");
$(".next_btn").addClass("btn_style-2");
$(".next_bottom_btn").addClass("btn_style-2");
}
function setCssStyle(type, _cssObject) {
if (type == 1) {
$(dom_s + " .prev_top_btn").css(_cssObject);
$(dom_s + " .prev_btn").css(_cssObject);
} else {
$(dom_s + " .next_btn").css(_cssObject);
$(dom_s + " .next_bottom_btn").css(_cssObject);
}
}
}
(function namePage() {
$(".page-left .page").html("/" + btnSum + "页");
$(".page-left .strip").html("共" + pageTotal + "条记录");
$(".page-left input").val(pageCurrent);
// 点击改变显示条数重置当前页
$(".select-box .select").change(function () {
var value = parseInt($(this).val());
pageSize = value;
if (pageData.pageTotal < pageSize) {
btnSum = 1;
} else if (pageData.pageTotal % pageSize === 0) {
btnSum = pageData.pageTotal / pageSize;
} else {
btnSum = parseInt(pageData.pageTotal / pageSize) + 1;
}
$(".page-left .page").html("/" + btnSum + "页");
$(".page-left input").val(pageCurrent);
Current = 1;
pageData.change({
Current: Current,
pageSize: pageSize
});
createBtnItem(Current);
setUpbtnState(dom.el, Current);
});
// 点击查询重置当前页
$(".allocation-admin .main-top .query").click(function () {
Current = 1;
createBtnItem(Current);
setUpbtnState(dom.el, Current);
});
})();
}
// 初始化 分页
var page_s1 = createPage(".page_name");
// 设置分页
setPage(page_s1, {
pageTotal: pageSum, // 数据总条数
pageSize: 10, // 每页显示条数
pageCurrent: 1, // 当前页
maxBtnNum: 5, // 最多按钮个数 （最少5个）
change: function (e) {
// 页数变化回调函数（返回当前页码）
console.log(e.Current + "=====" + e.pageSize);
// 切换分页请求数据
if (addFlag) {
queryTabP("http://123.com", {
catogoryName: catogoryNameP,
appConName: appConNameP,
type: typeP,
page: e.Current,
Current: e.pageSize
})
console.log("新增翻页")
} else {
queryTabP("http://123.com", {
page: e.Current,
Current: e.pageSize
})
console.log("默认翻页")
}
}
});
}
