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

2019-11-20 09:51:47

字體：大中小

供稿：網(wǎng)友

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

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

首先視圖的上面應(yīng)該需要引入js和css文件，主要有三個文件，分別是bootstrap的css，jquery以及Paginator的js文件。其中網(wǎng)上搜到，貌似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>

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

<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> </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的值(把返回數(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; } },//點擊事件，用于通過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" 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> </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>

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

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

而后臺這個GetDate的方法就像下面這樣：

public ActionResult GetDate(int id, int? page) { int pageIndex = page ?? 1;//當(dāng)前頁 const int pageSize = 2;//這里用來設(shè)置每頁要展示的數(shù)據(jù)數(shù)量，建議把這個寫到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(); //通過計算，得到分頁應(yīng)該需要分幾頁，其中不滿一頁的數(shù)據(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); }

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

最后顯示的效果如下圖：