基于bootstrap的分頁插件

2023-08-10 15:46:36 分類：留言閱讀(74118)

之前做的基于分頁，是分頁自己后端寫一堆代碼，返回給前端頁面顯示，插件感覺比較繁重、基于不靈活。分頁今天研究下基于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代碼：

效果：

點擊不同的頁顯示高亮藍。

讓我們一起看下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

前端代碼：

數據：

分頁：

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