Bootstrap Paginator分頁插件使用示例

最近做的asp.netMVC項目中需要對數據列表進行分類，這個本來就是基於bootstrap開發的后台，因此也就想着bootstrap是否有分頁插件呢，或者說是基於jquery支持的分頁功能，這樣整體的網站后台風格便能夠統一，又不用自己去寫一套分頁的功能。

首先便是要下載Bootstrap Paginator了，github上便有這個的開源項目提供下載：

https://github.com/lyonlai/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" 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>內容</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" 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>內容</td>');
                                            $("#list").append('<td>' + item.Message + '</td>');
                                            $("#list").append('</tr>');
                                            $("#list").append('</table>');
                                        });
                                    }
                                }
                            });
                        }
                    };
                    $('#example').bootstrapPaginator(options);
                }
            }
        });
    })
</script>

而在視圖的主體部分便有兩個div，一個用來呈現數據列表，一個用來放置選擇頁面的導航。

<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;//當前頁
            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來全局修改，這樣管理起來也方便，另外對於頁面這種屬性：頁碼，當前頁，數據數量等等的信息，可以做一個類來存儲，如果網站的項目比較大的話，這樣更加方便我們去更改自己的代碼。

最后顯示的效果如下圖：

總結：

盡管內容不多，但是這個的確花了我不少時間，主要是bootstrap的這個插件的開發文檔找了好久都找不到，不像之前EasyUI那樣文件比較多，而且例子在文檔中也比較詳細了，xmfdsh我正打算找個時間來總結下自己寫的一套分頁的做法，那樣就不用僅僅拘束於這些寫好的框架。