基于bootstrap的分页插件

之前做的分页，是自己后端写一堆代码，返回给前端页面显示，感觉比较繁重、不灵活。今天研究下基于bootstrap的做的插件，整理如下：

在使用bootstrap的插件的时候，需要导入一些css、js。

注意：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代码：

<script>
$('#pageLimit').bootstrapPaginator({
currentPage: 1,//当前的请求页面。
totalPages: 20,//一共多少页。
size:"normal",//应该是页眉的大小。
bootstrapMajorVersion: 3,//bootstrap的版本要求。
alignment:"right",
numberOfPages:5,//一页列出多少数据。
itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
switch (type) {
case "first": return "首页";
case "prev": return "上一页";
case "next": return "下一页";
case "last": return "末页";
case "page": return page;
}
}
});
</script>

效果：

点击不同的页显示高亮蓝。

让我们一起看下bootstrap的文档介绍：

咱们在引用这个插件的时候需要做以下操作：

后端需要传来数据的可以进行分割多少个页：

def task_list_page(request):
'''
功能：该函数主要是起到分页的作用。
:param request: 用户请求的对象，
:return: 返回前端数据或者页数。
'''
page_dic={'page_content':None,'page_count':None}
if request.method=='POST':
page_num=request.POST.get('page',None)
data_count=request.POST.get('count',None)
print(page_num,data_count)
# pagesplit_obj=pagesplit.Pager(page_num)
page_end=int(page_num)*int(data_count)
page_start=page_end -int(data_count)
query_obj=models.Task_info.objects.all()[page_start:page_end]
page_count=models.Task_info.objects.count()
page_cont_str=''
for i in query_obj:
page_cont_str+='''
<tr>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td><a href="/res_query_check/%s">点击查看任务结果</a></td> </tr>
'''%(i.id,i.task_name,i.task_user,i.id)
page_dic['page_content']=page_cont_str
page_dic['page_count']=page_count
return HttpResponse(json.dumps(page_dic))
elif request.method=='GET':
page_count = models.Task_info.objects.count()
x,y=divmod(page_count,12)
if y:
page_num=x+1
else:
page_num=x
return render(request,'task/task_list.html',{'pagecount':page_num})#传递数据一共分多少页。

前端js显示页数：

自执行，请求默认第一页数据：

$(function () {
$.ajax(
{
url:'/task_list_page/',
type:'POST',
data:{'page':1,'count':12},
dataType:'JSON',
success:function (callback) {
var page_count=callback.page_count;
var page_cont=callback.page_content;
$('tbody').append(page_cont);
$('#last_page').text(page_count)
}
}
)
});

注意：$('#last_page').text(page_count)使用的是：id为：last_page

前端代码：

数据：

<table class="table">
<thead>
<tr>
{# <th class="text-center">#</th>#}
<th>任务ID</th>
<th>任务名称</th>
<th>执行用户</th>
<th>执行结果</th>
</tr>
</thead>

<tbody>
</tbody>
</table>

分页：

1  <div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>

js代码：

$('#pageLimit').bootstrapPaginator({
currentPage: 1,
totalPages: {{ pagecount }},
size:"normal",
bootstrapMajorVersion: 3,
alignment:"right",
numberOfPages:8,
itemTexts: function (type, page, current) {
switch (type) {
case "first": return "首页";
case "prev": return "上一页";
case "next": return "下一页";
case "last": return "末页";
case "page": return page;
}//默认显示的是第一页。
},
onPageClicked: function (event, originalEvent, type, page){//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
$.ajax({
url:'/task_list_page/',
type:'POST',
data:{'page':page,'count':12},
dataType:'JSON',
success:function (callback) {
$('tbody').empty();
var page_count=callback.page_count;
var page_cont=callback.page_content;
$('tbody').append(page_cont);
$('#last_page').text(page_count)
}
})
}
});

效果：