后端分页
两个接口
思路：
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>