上一篇介紹通過接口來獲取數據,本篇將介紹如何以分頁形式展示出接口獲取到的數據
獲取到的數據往往會很多,爲了追去頁面的美觀和方便用戶的檢索,需要進行分頁的展示;
EasyNVR可接如多通道,當我們的通道越發多起來的時候,有時候一通片的展示所有通道,不僅不方便用戶的檢索,對於頁面的美觀來說也不是很適合。
實際操作(以EasyNVR前端分頁來進行演示):
使用BootstrapPagination首先需要進入相應的js文件(還有其他引用看具體的項目需求),
需要引入的控件
<link type="text/css" href="@@docroot/adminlte-2.3.6/plugins/bootstrap-pagination/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="@@docroot/adminlte-2.3.6/plugins/bootstrap-pagination/bootstrap.min.js"></script>
<link rel="stylesheet" href="@@docroot/adminlte-2.3.6/plugins/bootstrap-pagination/bootstrap-pagination.css" />
<script src="@@docroot/adminlte-2.3.6/plugins/bootstrap-pagination/bootstrap-pagination.js"></script>
HTML代碼
<div class="ports box">
<div class="box-header">
<h4 class="text-success text-center">通道列表</h4>
<div class="form-inline">
<input type="text" class="form-control pull-right" placeholder="搜索" id="search" onkeyup="searchChannel()" ><!-- <i class="fa fa-search"></i> -->
</div>
</div>
<div class="box-body">
<table class="table table-striped pointer" >
</table>
</div>
<div class="box-footer clearfix">
<nav class='pull-right'>
<ul class='pagination pagination-sm'></ul>//分頁展示的位置
</nav>
</div>
</div>
JS代碼(通過程序代碼來設置分頁參數)
function renderPortPage(ports){
function pageChanged(pageIndex,size){ //size 是 pageSize
var $t = $(".ports .box-body table");
var _ids = ports.slice(pageIndex*size, pageIndex*size + size);
$(".box-body table tr").remove();
if(_ids.length == 0){
$t.append("<tr><td>沒有數據</td></tr>");
}
$.each(_ids,function(i,id){
var $tr = $("<tr alt='{channel}' title='{Name}' role='button'><td class='text-success'> <i class='fa fa-folder'></i> {Name}</td></tr>".format({channel:id.Channel,Name:id.Name}));
$t.append($tr);
})
}
var pager = BootstrapPagination($(".ports .box-footer nav ul"),{
layoutScheme: "firstpage,pagenumber,lastpage",
total : ports.length,
pageGroupSize : 3,
pageSize : 8,
firstPageText : '首頁',
lastPageText : '尾頁',
pageChanged : pageChanged
})
pager.pageIndex(0);//分頁索引值
}
ports:是經過處理過後需要使用的對象數據;
layoutScheme: “firstpage,pagenumber,lastpage”,//需要的分頁樣式展示的項目
total : ports.length,//需要分頁的數據總數;
pageGroupSize : 3,//默認顯示的分頁選擇個數
pageSize : 8,//每頁展示條數
firstPageText : ‘首頁’,//定義標籤樣式
lastPageText : ‘尾頁’, //定義標籤樣式
pageChanged : pageChanged//調用函數
###可以根據自己的項目需求來定義其他一些樣式###
其他組件:
layoutScheme:“lefttext,pagesizelist,firstpage,prevgrou ppage,
prevpage,pagenumber,nextpage,nextgrouppage,lastpage,
pageinput,righttext”,
//記錄總數。
total: 101,
//分頁尺寸。指示每頁最多顯示的記錄數量。
pageSize: 20,
//當前頁索引編號。從其開始(從0開始)的整數。
pageIndex: 2,
//指示分頁導航欄中最多顯示的頁索引數量。
pageGroupSize: 5,
//位於導航條左側的輸出信息格式化字符串
leftFormateString: "本頁{count}條記錄/共{total}條記錄",
//位於導航條右側的輸出信息格式化字符串
rightFormateString: "第{pageNumber}頁/共{totalPages}頁",
//頁碼文本格式化字符串。
pageNumberFormateString: "{pageNumber}",
//分頁尺寸輸出格式化字符串
pageSizeListFormateString: "每頁顯示{pageSize}條記錄",
//上一頁導航按鈕文本。
prevPageText: "上一頁",
//下一頁導航按鈕文本。
nextPageText: "下一頁",
//上一組分頁導航按鈕文本。
prevGroupPageText: "上一組",
//下一組分頁導航按鈕文本。
nextGroupPageText: "下一組",
//首頁導航按鈕文本。
firstPageText: "首頁",
//尾頁導航按鈕文本。
lastPageText: "尾頁",
//設置頁碼輸入框中顯示的提示文本。
pageInputPlaceholder: "GO",
//接受用戶輸入內容的延遲時間。單位:毫秒
pageInputTimeout: 800,
//分頁尺寸列表。
pageSizeList: [5, 10, 20, 50, 100, 200],