一、页面代码，分为三部分，一是查询条件部分，二是数据部分，二是页码条
<div id="ticketoutquery"><td style="width: 70px; text-align: right">
订票单号: <td style="text-align: left">
@Html.TextBoxFor(s => s.TicketNo) <td style="width: 70px; text-align: right">
出票时间:
@Html.TextBoxFor(s => s.CreateDateStart, new { @class = "datepicker" })
@Html.TextBoxFor(s => s.CreateDateEnd, new { @class = "datepicker" }) <td style="width: 70px; text-align: right"><input type="button" id="tbQueryticketout" onclick="doQueryticketoutProcessing(1)" class="btn btn-primary"
value="查询" /><div id="TaskList"> @Html.Raw(@ViewData["TaskLists"])
<div class="page_nav" id="pageBar" style="margin:0,auto"> @Html.Raw(OilDigital.TicketSys2.Web.PageBarHelper.GetPagaBar((int)ViewData["PageIndex"], (int)ViewData["PageCount"], (int)ViewData["recoredCount"]))
二、页面条码类封装如下：
public class PageBarHelper
{ public static string GetPagaBar(int pageIndex, int pageCount, int recoredCount)
{ if (pageCount == 1)
{ return string.Empty;
} int start = pageIndex - 5;//计算起始位置.要求页面上显示10个数字页码.
if (start < 1)
{
start = 1;
} int end = start + 9;//计算终止位置.
if (end > pageCount)
{
end = pageCount; //重新计算一下Start值.
start = end - 9 < 1 ? 1 : end - 9;
}
StringBuilder sb = new StringBuilder(); if (pageIndex > 1)
{ //sb.AppendFormat("上一页", pageIndex - 1);、
sb.AppendFormat("上一页", pageIndex - 1);
} for (int i = start; i <= end; i++)
{ if (i == pageIndex)
{
sb.Append(i);
} else
{
sb.AppendFormat("{0}", i);
}
} if (pageIndex < pageCount)
{
sb.AppendFormat("下一页", pageIndex + 1);
} if (recoredCount >0)
{
sb.AppendFormat(" 每页10条，共{0}条", recoredCount);
} return sb.ToString();
}
}三、点击查询后会触发doQueryticketoutProcessing方法
function doQueryticketoutProcessing(pageIndex) { var ticketNoval = $('#TicketNo').val(); //订票单号
var CreateDateStart = $('#CreateDateStart').val(); //出票时间
var CreateDateEnd = $('#CreateDateEnd').val(); //出票时间
if (pageIndex == null || pageIndex == undefined || pageIndex <1)
{
pageIndex = 1;
} var type = $("#type").val();
showMsg();
$.ajax({
type: "post",
url: approvalUrl + "/GetProcessingTicketoutTaskListByQuery",
data: { ReceiveNumber: ticketNoval, createDateStart: CreateDateStart, createDateEnd: CreateDateEnd, type: type, pageIndex: pageIndex },
datatype: "html",
success: function (data) {
hideMsg(); if (data.ticketList == "") {
$("#taskList").html("暂时无任务列表!");
} else {
$("#TaskList").empty();
$("#TaskList").html(data.ticketList);
}
$("#pageBar").html(data.pageBar);
},
error: function (req, status, error) {
hideMsg();
console.log("获取订票单失败,原因如下:\r\n" + error);
}
});
}三、后台除了查询的条件外，分页的参数主要是pageIndex 和 pageSize. 传入后台后返回总记录数 recoredCount 和 总页数pageCount 下面给出分页的核心代码
public static IQueryableGetByStateAndDateTime(string ReceiveNumber, string ticketState, DateTime startDate, DateTime endDate,int pageIndex,int pageSize)
{
IQueryabletickets = dao.GetQueryable().Where(s => s.StateCode == "已出票" && s.CreatedTime > startDate && s.CreatedTime < endDate); if (!string.IsNullOrEmpty(ReceiveNumber))
{
tickets = tickets.Where(s => s.ReceiveNumber == ReceiveNumber.Trim());
} if(pageIndex!=0)
{
tickets = tickets.OrderBy(s=>s.CreatedTime).Skip((pageIndex - 1) * pageSize).Take(pageSize);
} return tickets;
}pageCount计算方法
pageCount = Convert.ToInt32(Math.Ceiling((double)recoredCount / pageSize));
四、分页控件的css样式如下：
page_nav{clear:both; padding:15px 0; color:#666; font:normal 12px/24px Arial; text-align:center;}
.page_nav a{display:inline-block; height:22px; margin:0 2px; padding:0 8px; text-decoration:none; border:solid 1px #dbe5ee; -moz-border-radius:2px; -webkit-border-radius:2px; -khtml-border-radius:2px; border-radius:2px; background:#fff; color:#333; font:normal 12px/22px Arial, Helvetica, sans-serif; cursor:pointer;}
.page_nav strong{display:inline-block; height:24px; margin:0 3px; padding:0 8px; border:none; -moz-border-radius:2px; -webkit-border-radius:2px; -khtml-border-radius:2px; border-radius:2px; background:#C00; color:#fff; font-weight:normal; line-height:24px; text-decoration:none;}
.page_nav a:hover,
.page_nav a.on{height:24px; margin:0 3px; border:none; background:#C00; color:#fff; line-height:24px; text-decoration:none;}
.page_nav a.select{cursor:default;}
.page_nav .view_all{display:block; text-align:center;}
.page_nav .view_all a{height:auto; margin:0; padding:0; border:none; color:#06c; line-height:24px;}
.page_nav .view_all a:hover{height:auto; margin:0; padding:0; background:none;}注意事项：
必须配置nhibernate如下：有些是.MsSql2000Dialect 在使用分页的方法时是会报错的。
