分页3
http://www.cnblogs.com/ChrisLee2011/p/4288194.html
?
頁(yè)面的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"> 訂單號(hào) </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 >
?
頁(yè)面的JavaScript部分如下：（此處需要引用插件bootstrap-paginator，具體的使用方法也在官網(wǎng)能看到，這里就不再詳述）
@ Scripts.Render( "~/bundles/bootstrap-paginator" )
< script type ="text/javascript">
$( '#example' ).bootstrapPaginator({
currentPage: $( '#currentPage' ).val(), //當(dāng)前頁(yè)
totalPages: $( '#totalPages' ).val(), //總頁(yè)數(shù)
bootstrapMajorVersion: 3, //兼容Bootstrap3.x版本
tooltipTitles: function (type, page) {
switch (type) {
case "first" :
return "第一頁(yè)" ;
case "prev" :
return "上一頁(yè)" ;
case "next" :
return "下一頁(yè)" ;
case "last" :
return "最后一頁(yè)" ;
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”是一個(gè)div，是<?div?class?="tableContainer">的父節(jié)點(diǎn)，在父頁(yè)面中占位，就是說(shuō)當(dāng)頁(yè)面數(shù)據(jù)返回將刷新整個(gè)PartialView，后臺(tái)是一個(gè)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; //計(jì)算分頁(yè)后總的頁(yè)面數(shù)
ViewData[ "currentPage" ] = currentPage; //當(dāng)前頁(yè)碼
return PartialView("~/Views/Home/OrderList.cshtml" ,data);
}
}
?
?其中的Pagination擴(kuò)展函數(shù)用于數(shù)據(jù)庫(kù)分頁(yè)，請(qǐng)參考我的另外一篇博文 “Entity Framework 分頁(yè)處理”
轉(zhuǎn)載于:https://www.cnblogs.com/lacey/p/5596048.html
總結(jié)
- 上一篇： 软件工程学习感想
- 下一篇： 一张传票引爆世界首富朋友圈 马斯克好友怒