快捷導(dǎo)航

Bootstrap Paginator分頁插件使用方法詳解

更新時(shí)間：2016年05月30日 09:08:15 作者：曉鏡水月

這篇文章主要為大家詳細(xì)介紹了Bootstrap Paginator分頁插件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近做的asp.netMVC項(xiàng)目中需要對數(shù)據(jù)列表進(jìn)行分類，這個(gè)本來就是基于bootstrap開發(fā)的后臺，因此也就想著bootstrap是否有分頁插件呢，或者說是基于jquery支持的分頁功能，這樣整體的網(wǎng)站后臺風(fēng)格便能夠統(tǒng)一，又不用自己去寫一套分頁的功能。

首先便是要下載Bootstrap Paginator了，下載地址：Bootstrap Paginator分頁插件

首先視圖的上面應(yīng)該需要引入js和css文件，主要有三個(gè)文件，分別是bootstrap的css，jquery以及Paginator的js文件。其中網(wǎng)上搜到，貌似jquery必須要1.8版本以上，這個(gè)我沒有親自去測試看過。于是視圖的文件引用便：

<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

然后，分頁的功能當(dāng)然是一個(gè)基于Ajax的局部刷新才能夠吸引我們，當(dāng)然這個(gè)便需要jquery的支持。之前自己搞的都是EasyUI的分頁，這次也應(yīng)該有點(diǎn)不同。

<script>
 $(function () {
 var carId = 1;
 $.ajax({
 url: "/OA/Setting/GetDate",
 datatype: 'json',
 type: "Post",
 data: "id=" + carId,
 success: function (data) {
 if (data != null) {
 $.each(eval("(" + data + ")").list, function (index, item) { //遍歷返回的json
 $("#list").append('<table id="data_table" class="table table-striped">');
 $("#list").append('<thead>');
 $("#list").append('<tr>');
 $("#list").append('<th>Id</th>');
 $("#list").append('<th>部門名稱</th>');
 $("#list").append('<th>備注</th>');
 $("#list").append('<th>&nbsp;</th>');
 $("#list").append('</tr>');
 $("#list").append('</thead>');
 $("#list").append('<tbody>');
 $("#list").append('<tr>');
 $("#list").append('<td>' + item.Id + '</td>');
 $("#list").append('<td>' + item.Name + '</td>');
 $("#list").append('<td>備注</td>');
 $("#list").append('<td>');
 $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');
 $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">刪除</button>');
 $("#list").append('</td>');
 $("#list").append('</tr>');
 $("#list").append('</tbody>');

 $("#list").append('<tr>');
 $("#list").append('<td>內(nèi)容</td>');
 $("#list").append('<td>' + item.Message + '</td>');
 $("#list").append('</tr>');
 $("#list").append('</table>');
 });
 var pageCount = eval("(" + data + ")").pageCount; //取到pageCount的值(把返回?cái)?shù)據(jù)轉(zhuǎn)成object類型)
 var currentPage = eval("(" + data + ")").CurrentPage; //得到urrentPage
 var options = {
 bootstrapMajorVersion: 2, //版本
 currentPage: currentPage, //當(dāng)前頁數(shù)
 totalPages: pageCount, //總頁數(shù)
 itemTexts: function (type, page, current) {
 switch (type) {
 case "first":
 return "首頁";
 case "prev":
 return "上一頁";
 case "next":
 return "下一頁";
 case "last":
 return "末頁";
 case "page":
 return page;
 }
 },//點(diǎn)擊事件，用于通過Ajax來刷新整個(gè)list列表
 onPageClicked: function (event, originalEvent, type, page) {
 $.ajax({
 url: "/OA/Setting/GetDate?id=" + page,
 type: "Post",
 data: "page=" + page,
 success: function (data1) {
 if (data1 != null) {
 $.each(eval("(" + data + ")").list, function (index, item) { //遍歷返回的json
 $("#list").append('<table id="data_table" class="table table-striped">');
 $("#list").append('<thead>');
 $("#list").append('<tr>');
 $("#list").append('<th>Id</th>');
 $("#list").append('<th>部門名稱</th>');
 $("#list").append('<th>備注</th>');
 $("#list").append('<th>&nbsp;</th>');
 $("#list").append('</tr>');
 $("#list").append('</thead>');
 $("#list").append('<tbody>');
 $("#list").append('<tr>');
 $("#list").append('<td>' + item.Id + '</td>');
 $("#list").append('<td>' + item.Name + '</td>');
 $("#list").append('<td>備注</td>');
 $("#list").append('<td>');
 $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');
 $("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">刪除</button>');
 $("#list").append('</td>');
 $("#list").append('</tr>');
 $("#list").append('</tbody>');

 $("#list").append('<tr>');
 $("#list").append('<td>內(nèi)容</td>');
 $("#list").append('<td>' + item.Message + '</td>');
 $("#list").append('</tr>');
 $("#list").append('</table>');
 });
 }
 }
 });
 }
 };
 $('#example').bootstrapPaginator(options);
 }
 }
 });
 })
</script>

而在視圖的主體部分便有兩個(gè)div，一個(gè)用來呈現(xiàn)數(shù)據(jù)列表，一個(gè)用來放置選擇頁面的導(dǎo)航。

<div class="span9">
 <label>部門列表</label>
 <hr />
 <div id="list"></div>

 <div id="example"></div>
 </div>

而后臺這個(gè)GetDate的方法就像下面這樣：

public ActionResult GetDate(int id, int? page)
 {
 int pageIndex = page ?? 1;//當(dāng)前頁
 const int pageSize = 2;//這里用來設(shè)置每頁要展示的數(shù)據(jù)數(shù)量，建議把這個(gè)寫到web.config中來全局控制
 //獲取需要展示的部門數(shù)據(jù)
 IEnumerable<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, x => x.Id!=null, x=>x.Id);
 //得到數(shù)據(jù)的條數(shù)
 int rowCount = list.Count();
 //通過計(jì)算，得到分頁應(yīng)該需要分幾頁，其中不滿一頁的數(shù)據(jù)按一頁計(jì)算
 if(rowCount%pageSize!=0)
 {
 rowCount = rowCount / pageSize + 1;
 }
 else
 {
 rowCount = rowCount / pageSize;
 }

 //轉(zhuǎn)成Json格式
 var strResult = "{\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" + JsonConvert.SerializeObject(list) + "}";
 return Json(strResult, JsonRequestBehavior.AllowGet);
 }

這個(gè)方法還是有點(diǎn)缺陷的，可以寫的更加完美，就好像上面那個(gè)pageSize這個(gè)可以通過讀取配置文件web.config來全局修改，這樣管理起來也方便，另外對于頁面這種屬性：頁碼，當(dāng)前頁，數(shù)據(jù)數(shù)量等等的信息，可以做一個(gè)類來存儲，如果網(wǎng)站的項(xiàng)目比較大的話，這樣更加方便我們?nèi)ジ淖约旱拇a。

最后顯示的效果如下圖：