python 进行后端分页详细代码
后端分页
两个接口
思路：
1. 先得到最大页和最小页数（1， 20） --》 传递给前端， 这样前端就可以知道有多少个页数
2. 通过传递页数得到当前页对应数据库的最大值和最小值
3. 通过sql limit 得到数据
class Pagination:
"""
explain:
obj = Pagination(1000, 20, 50)
print(obj.start)
print(obj.end)
obj.item_pages --> 求分页的页码
all_item :need the query library to count
"""
"""
all_item: 总count
current_page: 你的页数、
appear_page： 每页多少条数据
""" def __init__(self, all_item, current_page=1, appear_page=50):
try:
self.appear_page = appear_page
self.int = int(current_page)
self.all_item = all_item
page = self.int
except:
self.all_item = 0
page = 1
if page < 1:
page = 1 all_pager, c = divmod(all_item, self.appear_page)
if c > 0:
all_pager += 1 self.current_page = page
self.all_pager = all_pager @property
def start(self):
return (self.current_page -1) * self.appear_page @property
def end(self):
return self.current_page * self.appear_page @property
def item_pages(self):
all_pager, c = divmod(self.all_item, self.appear_page)
if c > 0:
all_pager += 1
return 1, all_pager+1 if __name__ == '__main__':
obj = Pagination(1001)
print(obj.start)
print(obj.end)
print(obj.item_pages)
前端分页 --》 数据一次性传给前端，然后前端分页
这个分页的原文链接： https://blog.csdn.net/qq_25065257/article/details/78329755
但是， 这段代码有问题， 当 numBtnCount: 4, 并且有21页的时候， 当前页数为18， 则会出现22页， 这里处理的不是很好， 当然作者也有自己的思考， 存在及合理， 我还写不出来呢
所以这里 numBtnCount: 3 ,比较合适， 还没有发现问题。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>pagination-nick</title>
<style>
button {
padding: 5px;
margin: 5px;
} .active-nick {
color: red;
} input {
width: 50px;
text-align: center;
}
</style>
</head> <body>
<div class="pagination-nick"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
//定义一个分页方法，可多次调用
function paginationNick(opt) {
//参数设置
var pager = {
paginationBox: '', //分页容器-- 必填
mainBox: '', //内容盒子--必填
numBtnBox: '', //数字按钮盒子-- 必填
btnBox: '', //按钮盒子 --必填
ipt: '', //input class-- 必填
goBtn: '', //go btn class --必填
currentBtn: '', //当前按钮class name --必填
pageCount: 6, //每页显示几条数据
numBtnCount: 4, //当前页左右两边各多少个数字按钮
currentPage: 0, //当前页码data-page，首屏默认值
maxCount: 0, //ajax请求数据分成的最大页码
data: [] //ajax请求的数据
};
pager = $.extend(pager, opt);
//请求数据页面跳转方法
function goPage(btn) {
//obj为ajax请求数据
var obj = { other: {}, value: [
{"1": "1"},
{"2": "1"},
{"3": "1"},
{"4": "1"},
{"5": "1"},
{"16": "1"},
{"166": "1"},
{"134": "1"},
{"134": "1"},
{"13": "1"},
{"12": "1"},
{"123": "1"},
{"12": "1"},
{"17": "1"},
{"178": "1"},
{"14": "1"},
{"100": "1"},
{"101": "1"},
{"102": "1"},
{"103": "1"},
{"104": "1"},
{"105": "1"},
{"106": "1"},
{"107": "1"},
{"108": "1"},
{"109": "1"},
{"110": "1"},
{"111": "1"},
{"112": "1"},
] };
//将展示的数据赋值给pager.data (array)
pager.data = obj.value;
//设置ajax请求数据分成的最大页码
pager.maxCount = pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) + 1 :
pager.data.length / pager.pageCount; // 设置当前页码
if(!isNaN(btn)) { //数字按钮
pager.currentPage = parseInt(btn);
} else {
switch(btn) {
case 'first':
pager.currentPage = 0;
break;
case 'prev':
if(pager.currentPage > 0) {
--pager.currentPage;
}
break;
case 'next':
if(pager.currentPage + 1 < pager.maxCount) {
++pager.currentPage;
}
break;
case 'last':
pager.currentPage = pager.maxCount - 1;
break;
}
}
//创建数字按钮
createNumBtn(pager.currentPage);
//赋值给页码跳转输入框的value，表示当前页码
$('.' + pager.btnBox + ' .' + pager.ipt).val(pager.currentPage + 1);
// 内容区填充数据
var arr = [],
str = '';
arr = pager.data.slice(pager.pageCount * pager.currentPage,
pager.data.length - pager.pageCount * (pager.currentPage + 1) > -1 ?
pager.pageCount * (pager.currentPage + 1) : pager.data.length); // 这里是控制页面显示内容div的地方
arr.forEach(function(v) {
str += '<div>' + v + '</div>';
});
$('.' + pager.mainBox).html(str);
}
//创建非数字按钮和数据内容区
function createOtherBtn() {
$('.' + pager.paginationBox).html('</div><div class="' + pager.mainBox + '"></div><div class="' + pager.btnBox + '"><button data-page="first" class="first-btn">首页</button><button data-page="prev" class="prev-btn">上一页</button><span class="' + pager.numBtnBox + '"></span><button data-page="next" class="next-btn">下一页</button><input type="text" placeholder="请输入页码" class="' + pager.ipt + '"><button class="' + pager.goBtn + '">确定go</button><button data-page="last" class="last-btn">尾页</button>');
//ipt value变化并赋值给go btn data-page
$('.' + pager.btnBox + ' .' + pager.ipt).change(function() {
if(!isNaN($(this).val())) { //是数字
if($(this).val() > pager.maxCount) { //限制value最大值，跳转尾页
$(this).val(pager.maxCount);
}
if($(this).val() < 1) { //限制value最小值，跳转首页
$(this).val(1);
}
} else { //非数字清空value
$(this).val('');
}
$('.' + pager.btnBox + ' .' + pager.goBtn).attr('data-page', $(this).val() ? $(this).val() - 1 : '');
});
//每个btn绑定请求数据页面跳转方法
$('.' + pager.btnBox + ' button').each(function(i, v) {
$(this).click(function() {
//有值且不是上一次的页码时才调用
if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage) {
goPage(v.getAttribute('data-page'));
}
});
});
}
//创建数字按钮
function createNumBtn(page) {
//page是页面index从0开始，这里的page加减一要注意
var str = '';
if(pager.maxCount > pager.numBtnCount * 2) { //若最大页码数大于等于固定数字按钮总数（pager.numBtnCount*2+1）时
//此页左边右边各pager.numBtnCount个数字按钮
if(page - pager.numBtnCount > -1) { //此页左边有pager.numBtnCount页 page页码从0开始
for(var m = pager.numBtnCount; m > 0; m--) {
str += '<button data-page="' + (page - m) + '">' + (page - m + 1) + '</button>';
}
} else {
for(var k = 0; k < page; k++) {
str += '<button data-page="' + k + '">' + (k + 1) + '</button>';
}
}
str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此页
if(pager.maxCount - page > 3) { //此页右边有pager.numBtnCount页 page页码从0开始
for(var j = 1; j < pager.numBtnCount + 1; j++) {
str += '<button data-page="' + (page + j) + '">' + (page + j + 1) + '</button>';
}
} else {
for(var i = page + 1; i < pager.maxCount; i++) {
str += '<button data-page="' + i + '">' + (i + 1) + '</button>';
}
}
/*数字按钮总数小于固定的数字按钮总数pager.numBtnCount*2+1时，
这个分支，可以省略*/
if(str.match(/<\/button>/ig).length < pager.numBtnCount * 2 + 1) {
str = '';
if(page < pager.numBtnCount) { //此页左边页码少于固定按钮数时
for(var n = 0; n < page; n++) { //此页左边
str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
}
str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此页
for(var x = 1; x < pager.numBtnCount * 2 + 1 - page; x++) { //此页右边
str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
}
}
if(pager.maxCount - page - 1 < pager.numBtnCount) {
for(var y = pager.numBtnCount * 2 - (pager.maxCount - page - 1); y > 0; y--) { //此页左边
str += '<button data-page="' + (page - y) + '">' + (page - y + 1) + '</button>';
}
str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此页
for(var z = page + 1; z < pager.maxCount; z++) { //此页右边
str += '<button data-page="' + z + '">' + (z + 1) + '</button>';
}
}
}
} else {
str = '';
for(var n = 0; n < page; n++) { //此页左边
str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
}
str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此页
for(var x = 1; x < pager.maxCount - page; x++) { //此页右边
str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
}
} $('.' + pager.numBtnBox).html(str); //每个btn绑定请求数据页面跳转方法
$('.' + pager.numBtnBox + ' button').each(function(i, v) {
$(this).click(function() {
goPage(v.getAttribute('data-page'));
});
}); //按钮禁用
$('.' + pager.btnBox + ' button').not('.' + pager.currentBtn).attr('disabled', false);
if(!page) { //首页时
$('.' + pager.btnBox + ' .first-btn').attr('disabled', true);
$('.' + pager.btnBox + ' .prev-btn').attr('disabled', 'disabled');
}
if(page == pager.maxCount - 1) { //尾页时
$('.' + pager.btnBox + ' .last-btn').attr('disabled', true);
$('.' + pager.btnBox + ' .next-btn').attr('disabled', true);
}
} //首屏加载
createOtherBtn(); //首屏加载一次非数字按钮即可
goPage(); //请求数据页面跳转满足条件按钮点击都执行，首屏默认跳转到currentPage
}
//调用
paginationNick({
paginationBox: 'pagination-nick', //分页容器--必填
mainBox: 'main-box-nick', //内容盒子--必填
numBtnBox: 'num-box-nick', //数字按钮盒子-- 必填
btnBox: 'btn-box-nick', //按钮盒子 --必填
ipt: 'page-ipt-nick', //input class-- 必填
goBtn: 'go-btn-nick', //go btn class --必填
currentBtn: 'active-nick' //当前按钮class name --必填
});
</script>
</body> </html>
找到问题了
169行有错误， 以改正 --》 当时作者写的是3， 应该改为paser.numBtnCount；
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>pagination-nick</title>
<style>
button {
padding: 5px;
margin: 5px;
} .active-nick {
color: red;
} input {
width: 50px;
text-align: center;
}
</style>
</head> <body>
<div class="pagination-nick"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
//定义一个分页方法，可多次调用
function paginationNick(opt) {
//参数设置
var pager = {
paginationBox: '', //分页容器-- 必填
mainBox: '', //内容盒子--必填
numBtnBox: '', //数字按钮盒子-- 必填
btnBox: '', //按钮盒子 --必填
ipt: '', //input class-- 必填
goBtn: '', //go btn class --必填
currentBtn: '', //当前按钮class name --必填
pageCount: 6, //每页显示几条数据
numBtnCount: 4, //当前页左右两边各多少个数字按钮
currentPage: 0, //当前页码data-page，首屏默认值
maxCount: 0, //ajax请求数据分成的最大页码
data: [] //ajax请求的数据
};
pager = $.extend(pager, opt);
//请求数据页面跳转方法
function goPage(btn) {
//obj为ajax请求数据
var obj = { other: {}, value: [
{"1": "1"},
{"2": "1"},
{"3": "1"},
{"4": "1"},
{"5": "1"},
{"16": "1"},
{"166": "1"},
{"134": "1"},
{"134": "1"},
{"13": "1"},
{"12": "1"},
{"123": "1"},
{"12": "1"},
{"17": "1"},
{"178": "1"},
{"14": "1"},
{"100": "1"},
{"101": "1"},
{"102": "1"},
{"103": "1"},
{"104": "1"},
{"105": "1"},
{"106": "1"},
{"107": "1"},
{"108": "1"},
{"109": "1"},
{"110": "1"},
{"111": "1"},
{"112": "1"},
] };
//将展示的数据赋值给pager.data (array)
pager.data = obj.value;
//设置ajax请求数据分成的最大页码
pager.maxCount = pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) + 1 :
pager.data.length / pager.pageCount; // 设置当前页码
if(!isNaN(btn)) { //数字按钮
pager.currentPage = parseInt(btn);
} else {
switch(btn) {
case 'first':
pager.currentPage = 0;
break;
case 'prev':
if(pager.currentPage > 0) {
--pager.currentPage;
}
break;
case 'next':
if(pager.currentPage + 1 < pager.maxCount) {
++pager.currentPage;
}
break;
case 'last':
pager.currentPage = pager.maxCount - 1;
break;
}
}
//创建数字按钮
createNumBtn(pager.currentPage);
//赋值给页码跳转输入框的value，表示当前页码
$('.' + pager.btnBox + ' .' + pager.ipt).val(pager.currentPage + 1);
// 内容区填充数据
var arr = [],
str = '';
arr = pager.data.slice(pager.pageCount * pager.currentPage,
pager.data.length - pager.pageCount * (pager.currentPage + 1) > -1 ?
pager.pageCount * (pager.currentPage + 1) : pager.data.length); // 这里是控制页面显示内容div的地方
arr.forEach(function(v) {
str += '<div>' + v + '</div>';
});
$('.' + pager.mainBox).html(str);
}
//创建非数字按钮和数据内容区
function createOtherBtn() {
$('.' + pager.paginationBox).html('</div><div class="' + pager.mainBox + '"></div><div class="' + pager.btnBox + '"><button data-page="first" class="first-btn">首页</button><button data-page="prev" class="prev-btn">上一页</button><span class="' + pager.numBtnBox + '"></span><button data-page="next" class="next-btn">下一页</button><input type="text" placeholder="请输入页码" class="' + pager.ipt + '"><button class="' + pager.goBtn + '">确定go</button><button data-page="last" class="last-btn">尾页</button>');
//ipt value变化并赋值给go btn data-page
$('.' + pager.btnBox + ' .' + pager.ipt).change(function() {
if(!isNaN($(this).val())) { //是数字
if($(this).val() > pager.maxCount) { //限制value最大值，跳转尾页
$(this).val(pager.maxCount);
}
if($(this).val() < 1) { //限制value最小值，跳转首页
$(this).val(1);
}
} else { //非数字清空value
$(this).val('');
}
$('.' + pager.btnBox + ' .' + pager.goBtn).attr('data-page', $(this).val() ? $(this).val() - 1 : '');
});
//每个btn绑定请求数据页面跳转方法
$('.' + pager.btnBox + ' button').each(function(i, v) {
$(this).click(function() {
//有值且不是上一次的页码时才调用
if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage) {
goPage(v.getAttribute('data-page'));
}
});
});
}
//创建数字按钮
function createNumBtn(page) {
//page是页面index从0开始，这里的page加减一要注意
var str = '';
if(pager.maxCount > pager.numBtnCount * 2) { //若最大页码数大于等于固定数字按钮总数（pager.numBtnCount*2+1）时
//此页左边右边各pager.numBtnCount个数字按钮
if(page - pager.numBtnCount > -1) { //此页左边有pager.numBtnCount页 page页码从0开始
for(var m = pager.numBtnCount; m > 0; m--) {
str += '<button data-page="' + (page - m) + '">' + (page - m + 1) + '</button>';
}
} else {
for(var k = 0; k < page; k++) {
str += '<button data-page="' + k + '">' + (k + 1) + '</button>';
}
}
str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此页
if(pager.maxCount - page > pager.numBtnCount) { //此页右边有pager.numBtnCount页 page页码从0开始
for(var j = 1; j < pager.numBtnCount + 1; j++) {
str += '<button data-page="' + (page + j) + '">' + (page + j + 1) + '</button>';
}
} else {
for(var i = page + 1; i < pager.maxCount; i++) {
str += '<button data-page="' + i + '">' + (i + 1) + '</button>';
}
}
/*数字按钮总数小于固定的数字按钮总数pager.numBtnCount*2+1时，
这个分支，可以省略*/
if(str.match(/<\/button>/ig).length < pager.numBtnCount * 2 + 1) {
str = '';
if(page < pager.numBtnCount) { //此页左边页码少于固定按钮数时
for(var n = 0; n < page; n++) { //此页左边
str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
}
str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此页
for(var x = 1; x < pager.numBtnCount * 2 + 1 - page; x++) { //此页右边
str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
}
}
if(pager.maxCount - page - 1 < pager.numBtnCount) {
for(var y = pager.numBtnCount * 2 - (pager.maxCount - page - 1); y > 0; y--) { //此页左边
str += '<button data-page="' + (page - y) + '">' + (page - y + 1) + '</button>';
}
str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此页
for(var z = page + 1; z < pager.maxCount; z++) { //此页右边
str += '<button data-page="' + z + '">' + (z + 1) + '</button>';
}
}
}
} else {
str = '';
for(var n = 0; n < page; n++) { //此页左边
str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
}
str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此页
for(var x = 1; x < pager.maxCount - page; x++) { //此页右边
str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
}
} $('.' + pager.numBtnBox).html(str); //每个btn绑定请求数据页面跳转方法
$('.' + pager.numBtnBox + ' button').each(function(i, v) {
$(this).click(function() {
goPage(v.getAttribute('data-page'));
});
}); //按钮禁用
$('.' + pager.btnBox + ' button').not('.' + pager.currentBtn).attr('disabled', false);
if(!page) { //首页时
$('.' + pager.btnBox + ' .first-btn').attr('disabled', true);
$('.' + pager.btnBox + ' .prev-btn').attr('disabled', 'disabled');
}
if(page == pager.maxCount - 1) { //尾页时
$('.' + pager.btnBox + ' .last-btn').attr('disabled', true);
$('.' + pager.btnBox + ' .next-btn').attr('disabled', true);
}
} //首屏加载
createOtherBtn(); //首屏加载一次非数字按钮即可
goPage(); //请求数据页面跳转满足条件按钮点击都执行，首屏默认跳转到currentPage
}
//调用
paginationNick({
paginationBox: 'pagination-nick', //分页容器--必填
mainBox: 'main-box-nick', //内容盒子--必填
numBtnBox: 'num-box-nick', //数字按钮盒子-- 必填
btnBox: 'btn-box-nick', //按钮盒子 --必填
ipt: 'page-ipt-nick', //input class-- 必填
goBtn: 'go-btn-nick', //go btn class --必填
currentBtn: 'active-nick' //当前按钮class name --必填
});
</script>
</body> </html>
后端分页， 一个接口分页， 一个接口拿数据
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>pagination-nick</title>
<style>
button {
padding: 5px;
margin: 5px;
} .active-nick {
color: red;
} input {
width: 50px;
text-align: center;
}
</style>
</head> <body>
<div class="pagination-nick"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
//定义一个分页方法，可多次调用
function paginationNick(opt) {
//参数设置
var pager = {
paginationBox: '', //分页容器-- 必填
mainBox: '', //内容盒子--必填
numBtnBox: '', //数字按钮盒子-- 必填
btnBox: '', //按钮盒子 --必填
ipt: '', //input class-- 必填
goBtn: '', //go btn class --必填
currentBtn: '', //当前按钮class name --必填
pageCount: 15, //每页显示几条数据
numBtnCount: 4, //当前页左右两边各多少个数字按钮
currentPage: 0, //当前页码data-page，首屏默认值
maxCount: 0, //ajax请求数据分成的最大页码
data: [] //ajax请求的数据
};
pager = $.extend(pager, opt);
//请求数据页面跳转方法
function goPage(btn) {
//obj为ajax请求数据 //将展示的数据赋值给pager.data (array) var page_item = [1, 21]; //设置ajax请求数据分成的最大页码
pager.maxCount = page_item[1]; // 设置当前页码
if(!isNaN(btn)) { //数字按钮
pager.currentPage = parseInt(btn);
} else {
switch(btn) {
case 'first':
pager.currentPage = 0;
break;
case 'prev':
if(pager.currentPage > 0) {
--pager.currentPage;
}
break;
case 'next':
if(pager.currentPage + 1 < pager.maxCount) {
++pager.currentPage;
}
break;
case 'last':
pager.currentPage = pager.maxCount - 1;
break;
}
}
//创建数字按钮
createNumBtn(pager.currentPage);
//赋值给页码跳转输入框的value，表示当前页码
$('.' + pager.btnBox + ' .' + pager.ipt).val(pager.currentPage + 1); var NewcurrentPage = pager.currentPage + 1;
console.log(NewcurrentPage);
// 内容区填充数据 --> 这里是后端获取ajax的值, 然后填充到这里, 可以写函数
var arr = [],
str = '';
arr = [1, 2, 3, 4, 5, 6]; // 这里是控制页面显示内容div的地方
arr.forEach(function(v) {
str += '<div>' + v + '</div>';
});
$('.' + pager.mainBox).html(str);
}
//创建非数字按钮和数据内容区
function createOtherBtn() {
$('.' + pager.paginationBox).html('</div><div class="' + pager.mainBox + '"></div><div class="' + pager.btnBox + '"><button data-page="first" class="first-btn">首页</button><button data-page="prev" class="prev-btn">上一页</button><span class="' + pager.numBtnBox + '"></span><button data-page="next" class="next-btn">下一页</button><input type="text" placeholder="请输入页码" class="' + pager.ipt + '"><button class="' + pager.goBtn + '">确定go</button><button data-page="last" class="last-btn">尾页</button>');
//ipt value变化并赋值给go btn data-page
$('.' + pager.btnBox + ' .' + pager.ipt).change(function() {
if(!isNaN($(this).val())) { //是数字
if($(this).val() > pager.maxCount) { //限制value最大值，跳转尾页
$(this).val(pager.maxCount);
}
if($(this).val() < 1) { //限制value最小值，跳转首页
$(this).val(1);
}
} else { //非数字清空value
$(this).val('');
}
$('.' + pager.btnBox + ' .' + pager.goBtn).attr('data-page', $(this).val() ? $(this).val() - 1 : '');
});
//每个btn绑定请求数据页面跳转方法
$('.' + pager.btnBox + ' button').each(function(i, v) {
$(this).click(function() {
//有值且不是上一次的页码时才调用
if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage) {
goPage(v.getAttribute('data-page'));
}
});
});
}
//创建数字按钮
function createNumBtn(page) {
//page是页面index从0开始，这里的page加减一要注意
var str = '';
if(pager.maxCount > pager.numBtnCount * 2) { //若最大页码数大于等于固定数字按钮总数（pager.numBtnCount*2+1）时
//此页左边右边各pager.numBtnCount个数字按钮
if(page - pager.numBtnCount > -1) { //此页左边有pager.numBtnCount页 page页码从0开始
for(var m = pager.numBtnCount; m > 0; m--) {
str += '<button data-page="' + (page - m) + '">' + (page - m + 1) + '</button>';
}
} else {
for(var k = 0; k < page; k++) {
str += '<button data-page="' + k + '">' + (k + 1) + '</button>';
}
}
str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此页
if(pager.maxCount - page > pager.numBtnCount) { //此页右边有pager.numBtnCount页 page页码从0开始
for(var j = 1; j < pager.numBtnCount + 1; j++) {
str += '<button data-page="' + (page + j) + '">' + (page + j + 1) + '</button>';
}
} else {
for(var i = page + 1; i < pager.maxCount; i++) {
str += '<button data-page="' + i + '">' + (i + 1) + '</button>';
}
}
/*数字按钮总数小于固定的数字按钮总数pager.numBtnCount*2+1时，
这个分支，可以省略*/
if(str.match(/<\/button>/ig).length < pager.numBtnCount * 2 + 1) {
str = '';
if(page < pager.numBtnCount) { //此页左边页码少于固定按钮数时
for(var n = 0; n < page; n++) { //此页左边
str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
}
str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此页
for(var x = 1; x < pager.numBtnCount * 2 + 1 - page; x++) { //此页右边
str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
}
}
if(pager.maxCount - page - 1 < pager.numBtnCount) {
for(var y = pager.numBtnCount * 2 - (pager.maxCount - page - 1); y > 0; y--) { //此页左边
str += '<button data-page="' + (page - y) + '">' + (page - y + 1) + '</button>';
}
str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此页
for(var z = page + 1; z < pager.maxCount; z++) { //此页右边
str += '<button data-page="' + z + '">' + (z + 1) + '</button>';
}
}
}
} else {
str = '';
for(var n = 0; n < page; n++) { //此页左边
str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
}
str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>'; //此页
for(var x = 1; x < pager.maxCount - page; x++) { //此页右边
str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
}
} $('.' + pager.numBtnBox).html(str); //每个btn绑定请求数据页面跳转方法
$('.' + pager.numBtnBox + ' button').each(function(i, v) {
$(this).click(function() {
goPage(v.getAttribute('data-page'));
});
}); //按钮禁用
$('.' + pager.btnBox + ' button').not('.' + pager.currentBtn).attr('disabled', false);
if(!page) { //首页时
$('.' + pager.btnBox + ' .first-btn').attr('disabled', true);
$('.' + pager.btnBox + ' .prev-btn').attr('disabled', 'disabled');
}
if(page == pager.maxCount - 1) { //尾页时
$('.' + pager.btnBox + ' .last-btn').attr('disabled', true);
$('.' + pager.btnBox + ' .next-btn').attr('disabled', true);
}
} //首屏加载
createOtherBtn(); //首屏加载一次非数字按钮即可
goPage(); //请求数据页面跳转满足条件按钮点击都执行，首屏默认跳转到currentPage
}
//调用
paginationNick({
paginationBox: 'pagination-nick', //分页容器--必填
mainBox: 'main-box-nick', //内容盒子--必填
numBtnBox: 'num-box-nick', //数字按钮盒子-- 必填
btnBox: 'btn-box-nick', //按钮盒子 --必填
ipt: 'page-ipt-nick', //input class-- 必填
goBtn: 'go-btn-nick', //go btn class --必填
currentBtn: 'active-nick' //当前按钮class name --必填
});
</script>
</body> </html>
python 进行后端分页详细代码的更多相关文章
- datatables后端分页
0x01 缘由 平时较少涉及前端,这次本以为模板中有表单,分页跳转搜索功能都比较齐全,可以高枕无忧,但是细看模板中的分页跳转是不需要与后台交互的,数据一次性写在前端,再有前端插件完成分页. 这种方式肯 ...
- 类Flask实现前后端交互之代码聊天室
前言 框架 项目目录及各自功能 流程图 后端 server backend exector 前端 ajax 页面更新 演示 简易应答模式 代理模式处理外部请求 后台日志 总结 前言 这两天老是做梦,全 ...
- 利用EasyUI 数据网格（DataGrid）的loader属性实现后端分页
该属性在easyui官方文档中并没有详细阐述,通过简单的资料查询和摸索,实现了easyUI数据网格的后端分页功能. 在官网文档中这样阐述loader属性: 定义如何从远程服务器加载数据.返回false ...
- php分页类代码带分页样式效果(转)
php分页类代码,有漂亮的分页样式风格 时间:2016-03-16 09:16:03来源:网络 导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...
- python的urllib2库详细使用说明
一直以来技术群里会有新入行的同学提问关于urllib和urllib2以及cookielib相关的问题.所以我打算在这里总结一下,避免大家反复回答同样的问题浪费资源. 这篇属于教程类的文字,如果你已经非 ...
- bootstrap table 前后端分页（超级简单）
前端分页:数据库查询所有的数据,在前端进行分页 后端分页:每次只查询当前页面加载所需要的那几条数据 下载bootstrap 下载bootstrap table jquery谁都有,不说了 项目结构:T ...
- datatables跳转自定义页面（后端分页）
在后端分页的情况下,怎么做到跳转自定义页面? 0x01 难点: 一. 怎么添加自定义代码? 前提:datatables在整个html加载完毕后,进行datatables数据的渲染,并且把右下角的 “上 ...
- Python小数据池，代码块
今日内容一些小的干货 一. id is == 二. 代码块 三. 小数据池 四. 总结 python小数据池,代码块的最详细.深入剖析 一. id is == 二. 代码块 三. 小数据池 四. ...
- EasyUI表格DataGrid前端分页和后端分页的总结
Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...
随机推荐
- tensorflow笔记3：CRF函数：tf.contrib.crf.crf_log_likelihood()
在分析训练代码的时候,遇到了,tf.contrib.crf.crf_log_likelihood,这个函数,于是想简单理解下: 函数的目的:使用crf 来计算损失,里面用到的优化方法是:最大似然估计 ...
- 用eclipse调试scala工程代码
1,在scala工程下面执行命令:sbt -jvm-debug 9999 2,然后执行命令:run,程序就跑起来了 3,然后用eclipse工具导入scala工程. 4,最后配置调试信息,端口号跟上面 ...
- [转]自定义注释@interface的用法
一.什么是注释 说起注释,得先提一提什么是元数据(metadata).所谓元数据就是数据的数据.也就是说,元数据是描述数据的.就象数据表中的字段一样,每个字段描述了这个字段下的数据的含义.而J ...
- Javascript eval()函数 基础回顾
如果您想详细了解ev al和JSON请参考以下链接: eval :https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Glo ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
- 大数据 Hive 简介
第一部分:Hive简介 什么是Hive •Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类SQL查询功能. •本质是将SQL转换为MapReduce程序 ...
- java基础篇---网络编程(UDP程序设计)
UDP程序设计 在TCP的索引操作都必须建立可靠地连接,这样一来肯定会浪费大量的系统性能,为了减少这种开销,在网络中又提供了另外一种传输协议---UDP,不可靠的连接,这种协议在各个聊天工具中被广泛的 ...
- Android 开发自己的网络收音机1——功能要求及设计方案
最近打算利用业余时间,编写一个Android的网络收音机.因为我自己偶尔也喜欢听听广播,所以打算用业余时间编写一个网络版收音机.说起收音机,其实在工作中已经编写过一个,不过那个收音机是需要硬件支持,也 ...
- 启动Tomcat报错：class path resource cannot be opened
直接原因:WEB-INF/classes下没有文件,即eclipse项目文件没有发布到Tomcat的文件夹. 根本原因:项目的Java Build Path /Libraries 里tomcat 和j ...
- linux中注册系统服务—service命令的原理通俗
能够使用service命令进行操作的,就是已经注册成为linux的系统服务了.window中也可以注册成为系统服务的办法. service命令用的次数真不少,就是比较多的关联点,用了很多次了,还是有些 ...