基於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)
}
})
}
});

效果：