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: 总countcurrent_page: 你的页数、appear_page： 每页多少条数据"""def __init__(self, all_item, current_page=1, appear_page=50):try:self.appear_page = appear_pageself.int = int(current_page)self.all_item = all_itempage = self.intexcept:self.all_item = 0page = 1if page < 1:page = 1all_pager, c = divmod(all_item, self.appear_page)if c > 0:all_pager += 1self.current_page = pageself.all_pager = all_pager@propertydef start(self):return (self.current_page -1) * self.appear_page@propertydef end(self):return self.current_page * self.appear_page@propertydef item_pages(self):all_pager, c = divmod(self.all_item, self.appear_page)if c > 0:all_pager += 1return 1, all_pager+1if __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>

View Code

找到问题了

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>

View Code

后端分页，一个接口分页，一个接口拿数据

<!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>

View Code

python 进行后端分页详细代码相关推荐

python random函数_详细代码实战讲解：如何用 Python让自己变成天选之子
今天为大家带来的内容是:详细代码讲解:如何用 Python让自己变成天选之子话不多说直接上代码: 请大家猜一猜下面这段代码的运行效果: 你是不是以为这段代码运行以后,结果如下图所示? 但实际上,我可 ...
Python贪吃蛇游戏详细代码和注释
在写Python游戏项目时,最重要的时python中的pygame库.安装pygame库和用法在我CSDN博客另一篇文章上.这里就不详细说了.下边时运行游戏界面. 下边是详细的代码和注释 import ...
Python——KNN实战(附详细代码与注解)
估计各位绅士都看过我之前的KNN算法博文(嘿嘿≧◔◡◔≦,假装大家都看过),应广大博客朋友们的要求,本次博主来开车讲解如何做一个KNN分类器实现将iris数据集进行分类.关于KNN的相关知识请看机器学 ...
Python的IDE之PyCharm：PyCharm的使用技巧图文教程(修改Pycharm默认风格颜色、编辑器内代码注释区域的颜色、编辑器内的Python Interpreter等)之详细攻略
Python的IDE之PyCharm:PyCharm的使用技巧图文教程(修改Pycharm默认风格颜色.编辑器内代码注释区域的颜色.编辑器内的Python Interpreter等)之详细攻略目录 ...
编程笔试(解析及代码实现)：国内各大银行(招商银行/浦发银行等)在线笔试常见题目(猴子吃桃/字符串逆序输出/一段话输出字的个数/单词大小转换等)及其代码实现(Java/Python/C#等)之详细攻略
编程笔试(解析及代码实现):国内各大银行(招商银行/浦发银行等)在线笔试常见题目(猴子吃桃/字符串逆序输出/一段话输出字的个数/单词大小转换等)及其代码实现(Java/Python/C#等)之详细攻略 ...
python 监控linux硬盘,Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例...
由于项目的需要,需要做一个简单监控服务器的CPU利用率.CPU负载.硬盘使用率.内存利用率和服务器的各个端口的开启情况的程序,并把结果通知到监控平台,如果出现异常,监控平台打电话或者发短信通知给具体的 ...
python贪吃蛇原始代码_pthon贪吃蛇游戏详细代码
本文实例为大家分享了pthon贪吃蛇游戏的具体代码,供大家参考,具体内容如下在写Python游戏项目时,最重要的时python中的pygame库.安装pygame库和用法在我CSDN博客另一篇文章上 ...
Python开发《外星人入侵》游戏项目，付详细代码和注释
游戏功能概述:在游戏<外星人入侵>中,玩家控制一艘最初出现在屏幕底部中央的飞船.玩家可以使用箭头键左右移动飞船,还可使用空格键射击.游戏开始时,一群外星人出现在天空中,并向屏幕下方移动.玩 ...
（信贷风控九）行为评分卡模型python实现（详细代码+注释+讲解）
(九)行为评分卡模型python实现(详细代码+注释+讲解) 浅谈行为评分卡我们知道行为评分卡只要用在信贷的贷中环节,贷中指的是贷款发放之后到期之前的时间段,其实行为评分卡和申请评分卡在实现上没有太 ...
Python实现秒杀某宝商品抢购（附超详细代码）
前言 618过去了,前两天我干了一件惊天动地的大事,估计这件大事是很多小伙伴都想干的.我居然用python抢购淘宝商品,没想到吧,最勇敢的还是我.关于抢购的思路以及代码,我将会在这篇文章中详细的介绍 ...

python 进行后端分页详细代码

后端分页

前端分页 --》数据一次性传给前端，然后前端分页

后端分页，一个接口分页，一个接口拿数据

python 进行后端分页详细代码相关推荐

最新文章

热门文章

python 进行后端分页详细代码

后端分页

前端分页 --》 数据一次性传给前端，然后前端分页

后端分页， 一个接口分页， 一个接口拿数据

python 进行后端分页详细代码相关推荐

最新文章

热门文章

前端分页 --》数据一次性传给前端，然后前端分页

后端分页，一个接口分页，一个接口拿数据