最近做的asp.netMVC項目中需要對數據列表進行分類，這個本來就是基於bootstrap開發的後台，因此也就想著bootstrap是否有分頁插件呢，或者說是基於jquery支持的分頁功能，這樣整體的網站後颱風格便能夠統一，又不用自己去寫一套分頁的功能。
首先便是要下載Bootstrap Paginator了，下載地址：Bootstrap Paginator分頁插件
首先視圖的上面應該需要引入js和css文件，主要有三個文件，分別是bootstrap的css，jquery以及Paginator的js文件。其中網上搜到，貌似jquery必須要1.8版本以上，這個我沒有親自去測試看過。於是視圖的文件引用便：
<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>
然後，分頁的功能當然是一個基於Ajax的局部刷新才能夠吸引我們，當然這個便需要jquery的支持。之前自己搞的都是EasyUI的分頁，這次也應該有點不同。
<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">'); $("#list").append('<thead>'); $("#list").append('<tr>'); $("#list").append('<th>Id</th>'); $("#list").append('<th>部門名稱</th>'); $("#list").append('<th>備註</th>'); $("#list").append('<th></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 onclick="Edit(' + item.Id + ' );">修改</button>'); $("#list").append('<button onclick="Edit(' + item.Id + ' );">刪除</button>'); $("#list").append('</td>'); $("#list").append('</tr>'); $("#list").append('</tbody>'); $("#list").append('<tr>'); $("#list").append('<td>內容</td>'); $("#list").append('<td>' + item.Message + '</td>'); $("#list").append('</tr>'); $("#list").append('</table>'); }); var pageCount = eval("(" + data + ")").pageCount; //取到pageCount的值(把返回數據轉成object類型) var currentPage = eval("(" + data + ")").CurrentPage; //得到urrentPage var options = { bootstrapMajorVersion: 2, //版本currentPage: currentPage, //當前頁數totalPages: pageCount, //總頁數itemTexts: function (type, page, current) { switch (type) { case "first": return "首頁"; case "prev": return "上一頁"; case "next": return "下一頁"; case "last": return "末頁"; case "page": return page; } },//點擊事件，用於通過Ajax來刷新整個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">'); $("#list").append('<thead>'); $("#list").append('<tr>'); $("#list").append('<th>Id</th>'); $("#list").append('<th>部門名稱</th>'); $("#list").append('<th>備註</th>'); $("#list").append('<th></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 onclick="Edit(' + item.Id + ' );">修改</button>'); $("#list").append('<button onclick="Edit(' + item.Id + ' );">刪除</button>'); $("#list").append('</td>'); $("#list").append('</tr>'); $("#list").append('</tbody>'); $("#list").append('<tr>'); $("#list").append('<td>內容</td>'); $("#list").append('<td>' + item.Message + '</td>'); $("#list").append('</tr>'); $("#list").append('</table>'); }); } } }); } }; $('#example').bootstrapPaginator(options); } } }); })</script>而在視圖的主體部分便有兩個div，一個用來呈現數據列表，一個用來放置選擇頁面的導航。
<div> <label>部門列表</label> <hr /> <div id="list"></div> <div id="example"></div> </div>
而後台這個GetDate的方法就像下面這樣：
public ActionResult GetDate(int id, int? page) { int pageIndex = page ?? 1;//當前頁const int pageSize = 2;//這裡用來設置每頁要展示的數據數量，建議把這個寫到web.config中來全局控制//獲取需要展示的部門數據IEnumerable<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, x => x.Id!=null, x=>x.Id); //得到數據的條數int rowCount = list.Count(); //通過計算，得到分頁應該需要分幾頁，其中不滿一頁的數據按一頁計算if(rowCount%pageSize!=0) { rowCount = rowCount / pageSize + 1; } else { rowCount = rowCount / pageSize; } //轉成Json格式var strResult = "{/"pageCount/":"+rowCount+",/"CurrentPage/":"+pageIndex+",/"list/":" + JsonConvert.SerializeObject(list) + "}"; return Json(strResult, JsonRequestBehavior.AllowGet); }這個方法還是有點缺陷的，可以寫的更加完美，就好像上面那個pageSize這個可以通過讀取配置文件web.config來全局修改，這樣管理起來也方便，另外對於頁面這種屬性：頁碼，當前頁，數據數量等等的信息，可以做一個類來存儲，如果網站的項目比較大的話，這樣更加方便我們去更改自己的代碼。
最後顯示的效果如下圖：
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是為大家分享的Bootstrap Paginator分頁插件的使用方法，希望對大家熟練掌握Bootstrap Paginator分頁插件使用方法有所幫助。