利用mvc3实现分页效果。效果图如下：
直接拷代码：
首页添加一个Helper的类（命名空间为System.Web.Mvc;）。
public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount)
{
var redirectTo = htmlHelper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath;
pageSize = pageSize == ? : pageSize;
var totalPages = Math.Max((totalCount + pageSize - ) / pageSize, ); //总页数
var output = new StringBuilder();
if (totalPages > )
{
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首页</a> ", redirectTo, pageSize);
if (currentPage > )
{//处理上一页的连接
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一页</a> ", redirectTo, currentPage - , pageSize);
} output.Append(" ");
int currint = ;
for (int i = ; i <= ; i++)
{//一共最多显示10个页码，前面5个，后面5个
if ((currentPage + i - currint) >= && (currentPage + i - currint) <= totalPages)
{
if (currint == i)
{//当前页处理
output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage);
}
else
{//一般页处理
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint);
}
}
output.Append(" ");
}
if (currentPage < totalPages)
{//处理下一页的链接
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一页</a> ", redirectTo, currentPage + , pageSize);
} output.Append(" ");
if (currentPage != totalPages)
{
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末页</a> ", redirectTo, totalPages, pageSize);
}
output.Append(" ");
}
output.AppendFormat("<label>第{0}页 / 共{1}页</label>", currentPage, totalPages);//这个统计加不加都行 return new HtmlString(output.ToString());
}
其次再添加两个公共类：PagerInfo与PageQuery。PagerInfo类用于放置分页相关内容。PageQuery则用于放置PagerInfo及要显示的数据信息。
public class PagerInfo
{
public int RecordCount { get; set; } public int CurrentPageIndex { get; set; } public int PageSize { get; set; }
}
public class PagerQuery<TPager, TEntityList>
{
public PagerQuery(TPager pager, TEntityList entityList)
{
this.Pager = pager;
this.EntityList = entityList;
}
public TPager Pager { get; set; }
public TEntityList EntityList { get; set; }
}
然后在Controller里面添加Action
public ActionResult Index(int? pageSize,int? pageIndex)
{
int pageIndex1 = pageIndex ?? ;
int pageSize1 = pageSize ?? ;
int count=;
//从数据库在取得数据，并返回总记录数
var temp = newsSer.LoadPageEntities(c => true, c => c.id, false, pageSize1, pageIndex1, out count);
PagerInfo pager = new PagerInfo();
pager.CurrentPageIndex = pageIndex1;
pager.PageSize = pageSize1;
pager.RecordCount = count;
PagerQuery<PagerInfo,IQueryable<news>> query = new PagerQuery<PagerInfo,IQueryable<news>>(pager,temp);
return View(query);
}
最要在View里的部分代码如下：
@model PagerQuery<PagerInfo, IQueryable<_6_16DFAZ_Models.news>>
最后在body里面要显示的数据如下：
<tbody>
@foreach (var item in Model.EntityList)
{
<tr>
<td class="checkBox">
<input name="ids[]" type="checkbox" value="" />
</td>
<td>
@item.author
</td>
<td>
@item.title
</td>
<td>
@item.ctime
</td>
<td>
@Html.ActionLink("编辑", "Edit", new { id = item.id }) |
@Html.ActionLink("删除", "Delete", new { id = item.id })
</td>
</tr>
}
@*分页*@
<tr class="">
<td colspan="5" align="center" class="paginator">
<span>
@Html.ShowPageNavigate(Model.Pager.CurrentPageIndex, Model.Pager.PageSize, Model.Pager.RecordCount)
</span>
</td>
</tr>
</tbody>
ok.分页效果已经实现。为了美观，再添加一些样式。
.paginator
{
font: 12px Arial, Helvetica, sans-serif;
padding: 10px 20px 10px 0;
margin: 0px auto;
} .paginator a
{
border: solid 1px #ccc;
color: #0063dc;
cursor: pointer;
text-decoration: none;
} .paginator a:visited
{
padding: 1px 6px;
border: solid 1px #ddd;
background: #fff;
text-decoration: none;
} .paginator .cpb
{
border: 1px solid #F50;
font-weight:;
color: #F50;
background-color: #ffeee5;
} .paginator a:hover
{
border: solid 1px #F50;
color: #f60;
text-decoration: none;
} .paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover
{
float: left;
height: 16px;
line-height: 16px;
min-width: 10px;
_width: 10px;
margin-right: 5px;
text-align: center;
white-space: nowrap;
font-size: 12px;
font-family: Arial,SimSun;
padding: 0 3px;
} .paginator label
{
display:block;
float:left;
}
最终的显示图如下：
大功告成！