bootstrap分页插件用法

基于bootstrap的分页插件

  之前做的分页，是自己后端写一堆代码，返回给前端页面显示，感觉比较繁重、不灵活。今天研究下基于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 });

 

效果：

 

学习是一种态度，坚持是质变的利器！