Bootstrap表格分頁（一）

最近在學習Bootstrap的分頁，有一種方法用“Bootstrap-Paginator”的東西來做。

先預覽一下：

為了能夠局部刷新頁面，我創建了一個PartialView

 

頁面的HTML部分如下：

< div class ="tableContainer">
    < input id ="currentPage" type ="hidden" value =" @ViewData[ "currentPage"] "/>
    < input id ="totalPages" type ="hidden" value =" @ViewData["totalPages" ] " />
    < table class ="table table-hover table-striped">
        < thead>
            < tr>
                < th class ="col-md-4 text-center"> 乘車碼 </th >
                < th class ="col-md-4 text-center"> 訂單號 </th >
                < th class ="col-md-4 text-center"> 訂單日期 </th >
            </ tr>
        </ thead>
        < tbody>
            @foreach ( var item in Model)
            {
                < tr>
                    < td> @item.BusNo </ td>
                    < td> @item.OrderId </ td>
                    < td> @item.OrderDate </ td>
                </ tr>
            }
        </ tbody>
    </ table>
    < ul id ="example"></ ul>
</ div >

 

頁面的JavaScript部分如下：（此處需要引用插件 bootstrap-paginator，具體的使用方法也在官網能看到，這里就不再詳述）

@ Scripts.Render( "~/bundles/bootstrap-paginator" )
< script type ="text/javascript">
    $( '#example' ).bootstrapPaginator({
        currentPage: $( '#currentPage' ).val(),   //當前頁
        totalPages: $( '#totalPages' ).val(),     //總頁數
        bootstrapMajorVersion: 3,               //兼容Bootstrap3.x版本
        tooltipTitles: function (type, page) {
            switch (type) {
                case "first" :
                    return "第一頁" ;
                case "prev" :
                    return "上一頁" ;
                case "next" :
                    return "下一頁" ;
                case "last" :
                    return "最后一頁" ;
                case "page" :
                    return page;
            }
            return "" ;
        },
        onPageClicked: function (event, originalEvent, type, page) {
            $.get( '/Home/GetPaginationData' , { currentPage: page, pageSize:10 }, function (view) {
                $( '#tableTest' ).html(view);
            });
        }
    });
</ script >

上面的“#tableTest”是一個div，是< div class ="tableContainer">的父節點，在父頁面中占位，就是說當頁面數據返回將刷新整個PartialView，后台是一個GET，如下：

 

public ActionResult GetPaginationData( int currentPage = 1, int pageSize = 10)
        {
            using (var context = new TestEntities ())
            {
                int count;
                var q = (from a in context.Tickets
                         join b in context.Order on a.OrderId equals b.Id
                         select new TableItem
                         {
                             BusNo = a.BusNumber,
                             OrderId = b.Id,
                             OrderDate = b.OrderDateTime,
                         }).Pagination(currentPage, pageSize, out count);
                var data = q.ToList();
                ViewData[ "totalPages" ] = count / pageSize + 1; //計算分頁后總的頁面數
                ViewData[ "currentPage" ] = currentPage;  //當前頁碼
                return PartialView("~/Views/Home/OrderList.cshtml" ,data);
            }
        }

 

      

 其中的Pagination擴展函數用於數據庫分頁，請參考我的另外一篇博文 “ Entity Framework 分頁處理”