之前做的分页，是自己后端写一堆代码，返回给前端页面显示，感觉比较繁重、不灵活。今天研究下基于bootstrap的做的插件，整理如下：
在使用bootstrap的插件的时候，需要导入一些css、js。
1 <link href="/static/css/bootstrap.min.css" rel="stylesheet"> 2 <script src="/static/js/jquery-2.1.1.min.js"></script> 3 <script src="/static/js/bootstrap.min.js"></script> 4 <script src="/static/js/bootstrap-paginator.js"></script>
注意：js的导入顺序，jquery优先导入并且版本要2.x。中文乱码：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
其中：bootstrap-paginator.js下载的地址：https://github.com/lyonlai/bootstrap-paginator 在GitHub上进行下载。
html代码：
1 <div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
js代码：
1 <script> 2 $(\'#pageLimit\').bootstrapPaginator({ 3 currentPage: 1,//当前的请求页面。 4 totalPages: 20,//一共多少页。 5 size:"normal",//应该是页眉的大小。 6 bootstrapMajorVersion: 3,//bootstrap的版本要求。 7 alignment:"right", 8 numberOfPages:5,//一页列出多少数据。 9 itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。 10 switch (type) { 11 case "first": return "首页"; 12 case "prev": return "上一页"; 13 case "next": return "下一页"; 14 case "last": return "末页"; 15 case "page": return page; 16 } 17 } 18 }); 19 </script>
效果：
点击不同的页显示高亮蓝。
让我们一起看下bootstrap的文档介绍：
咱们在引用这个插件的时候需要做以下操作：
后端需要传来数据的可以进行分割多少个页：
1 def task_list_page(request): 2 \'\'\' 3 功能：该函数主要是起到分页的作用。 4 :param request: 用户请求的对象， 5 :return: 返回前端数据或者页数。 6 \'\'\' 7 page_dic={\'page_content\':None,\'page_count\':None} 8 if request.method==\'POST\': 9 page_num=request.POST.get(\'page\',None) 10 data_count=request.POST.get(\'count\',None) 11 print(page_num,data_count) 12 # pagesplit_obj=pagesplit.Pager(page_num) 13 page_end=int(page_num)*int(data_count) 14 page_start=page_end -int(data_count) 15 query_obj=models.Task_info.objects.all()[page_start:page_end] 16 page_count=models.Task_info.objects.count() 17 page_cont_str=\'\' 18 for i in query_obj: 19 page_cont_str+=\'\'\' 20 <tr> 21 <td>%s</td> 22 <td>%s</td> 23 <td>%s</td> 24 <td><a href="/res_query_check/%s">点击查看任务结果</a></td> </tr> 25 \'\'\'%(i.id,i.task_name,i.task_user,i.id) 26 page_dic[\'page_content\']=page_cont_str 27 page_dic[\'page_count\']=page_count 28 return HttpResponse(json.dumps(page_dic)) 29 elif request.method==\'GET\': 30 page_count = models.Task_info.objects.count() 31 x,y=divmod(page_count,12) 32 if y: 33 page_num=x+1 34 else: 35 page_num=x 36 return render(request,\'task/task_list.html\',{\'pagecount\':page_num})#传递数据一共分多少页。
前端js显示页数：
自执行，请求默认第一页数据：
1 $(function () { 2 $.ajax( 3 { 4 url:\'/task_list_page/\', 5 type:\'POST\', 6 data:{\'page\':1,\'count\':12}, 7 dataType:\'JSON\', 8 success:function (callback) { 9 var page_count=callback.page_count; 10 var page_cont=callback.page_content; 11 $(\'tbody\').append(page_cont); 12 $(\'#last_page\').text(page_count) 13 } 14 } 15 ) 16 });
注意：$(\'#last_page\').text(page_count)使用的是：id为：last_page
前端代码：
数据：
1 <table class="table"> 2 <thead> 3 <tr> 4 {# <th class="text-center">#</th>#} 5 <th>任务ID</th> 6 <th>任务名称</th> 7 <th>执行用户</th> 8 <th>执行结果</th> 9 </tr> 10 </thead> 11 12 <tbody> 13 </tbody> 14 </table>
分页：
1 <div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
js代码：
1 $(\'#pageLimit\').bootstrapPaginator({ 2 currentPage: 1, 3 totalPages: {{ pagecount }}, 4 size:"normal", 5 bootstrapMajorVersion: 3, 6 alignment:"right", 7 numberOfPages:8, 8 itemTexts: function (type, page, current) { 9 switch (type) { 10 case "first": return "首页"; 11 case "prev": return "上一页"; 12 case "next": return "下一页"; 13 case "last": return "末页"; 14 case "page": return page; 15 }//默认显示的是第一页。 16 }, 17 onPageClicked: function (event, originalEvent, type, page){//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。 18 $.ajax({ 19 url:\'/task_list_page/\', 20 type:\'POST\', 21 data:{\'page\':page,\'count\':12}, 22 dataType:\'JSON\', 23 success:function (callback) { 24 $(\'tbody\').empty(); 25 var page_count=callback.page_count; 26 var page_cont=callback.page_content; 27 $(\'tbody\').append(page_cont); 28 $(\'#last_page\').text(page_count) 29 } 30 }) 31 } 32 });
效果：