在没有上代码之前先看下效果图吧:
本分页功能主要是实现了:通过Jquery ajax 静态分页
要建立一个分页类,实现分页控件的显示,注意该类应该放在包 namespace System.Web.Mvc 下
由于我用的是mvc 3 所以在分页类方法调用时返回的是MvcHtmlString 这个在mvc 2 下也是同样支持的
看下分页类的代码吧:
/// <summary> /// 分页插件 /// </summary> /// <param name="helper"></param> /// <param name="urlPrefix">页面内容连接地址</param> /// <param name="divId">内容加载容器</param> /// <param name="FindValue">查找内容 </param> /// <param name="SortCell">排序字段</param> /// <param name="OrderType">排序类型(ASC 或 DESC) 默认 DESC</param> /// <param name="totalRecords">总页数</param> /// <param name="currentPage">当前页</param> /// <param name="currentPageSize">每页显示条数</param> /// <returns></returns> public static MvcHtmlString Pager(this HtmlHelper helper, string urlPrefix, string divId, string FindValue, string SortCell, string OrderType, int totalRecords, int? currentPage = 1, int? currentPageSize = 20) { StringBuilder sb1 = new StringBuilder(); int pageIndex = 0; int pageSize = 0; pageIndex = int.Parse(currentPage.ToString()); pageSize = int.Parse(currentPageSize.ToString()); int pageNumber = 10; int seed = pageIndex % pageNumber == 0 ? (pageIndex - pageNumber) : pageIndex - (pageIndex % pageNumber); int AllPage = (totalRecords + pageSize - 1) / pageSize; urlPrefix = urlPrefix.TrimStart('/'); urlPrefix = "/" + urlPrefix; if (string.IsNullOrWhiteSpace(OrderType)) { OrderType = "DESC"; } if (pageIndex > pageNumber) sb1.AppendLine(String.Format("<a href='#' onclick=GetPagingParam(\"{0}\",\"{1}\",\"{2}\",\"{3}\",\"{4}\",\"{5}\",\"{6}\") >首页</a>", divId, 1, pageSize, urlPrefix, SortCell, OrderType, FindValue)); if (pageIndex > 0) { int page = pageIndex - 1; if (page > 0) { sb1.AppendLine(String.Format("<a href='#' onclick=GetPagingParam(\"{0}\",\"{1}\",\"{2}\",\"{3}\",\"{4}\",\"{5}\",\"{6}\") >上一页</a>", divId, page, pageSize, urlPrefix, SortCell, OrderType, FindValue)); } } if (pageIndex - 10 > 0) { sb1.AppendLine(String.Format("<a href='#' onclick=GetPagingParam(\"{0}\",\"{1}\",\"{2}\",\"{3}\",\"{4}\",\"{5}\",\"{6}\") >...</a>", divId, (pageIndex - pageNumber) + 1, pageSize, urlPrefix, SortCell, OrderType, FindValue)); } for (int i = seed; i < AllPage && i < seed + pageNumber; i++) { int page = i + 1; if (pageIndex == page) { sb1.AppendLine("<span class=\"current\">" + page + "</span>"); } else { sb1.AppendLine(String.Format("<a href='#' onclick=GetPagingParam(\"{0}\",\"{1}\",\"{2}\",\"{3}\",\"{4}\",\"{5}\",\"{6}\") >{1}</a>", divId, page, pageSize, urlPrefix, SortCell, OrderType, FindValue)); } } if (pageIndex + 10 <= AllPage - 1) { sb1.AppendLine(String.Format("<a href='#' onclick=GetPagingParam(\"{0}\",\"{1}\",\"{2}\",\"{3}\",\"{4}\",\"{5}\",\"{6}\") >...</a>", divId, (pageIndex + pageNumber), pageSize, urlPrefix, SortCell, OrderType, FindValue)); } if (pageIndex < AllPage - 1) { sb1.AppendLine(String.Format("<a href='#' onclick=GetPagingParam(\"{0}\",\"{1}\",\"{2}\",\"{3}\",\"{4}\",\"{5}\",\"{6}\") >下一页</a>", divId, pageIndex + 1, pageSize, urlPrefix, SortCell, OrderType, FindValue)); } if (AllPage > pageNumber && pageIndex < AllPage) { sb1.AppendLine(String.Format("<a href='#' onclick=GetPagingParam(\"{0}\",\"{1}\",\"{2}\",\"{3}\",\"{4}\",\"{5}\",\"{6}\") >尾页</a>", divId, AllPage, pageSize, urlPrefix, SortCell, OrderType, FindValue)); } return new MvcHtmlString(sb1.ToString()); }
记得该类是放在 namespace System.Web.Mvc
namespace System.Web.Mvc
{
public static class PagerHelper
{
//加上以上代码 就是一个分页类了
}
}
分页类创建完成之后就是调用使用了,其实很简单通过js
//divId 容器ID, pageIndex 当前第几页, pageSize每页大小,urlPrefix 页面连接地址,SortCell 排序字段,OrderType 排序类型 FindValue 查找内容 function GetPagingParam(divId, pageIndex, pageSize, urlPrefix, SortCell, OrderType, searchValue) { if (searchValue == undefined) { searchValue = ""; } var urls = urlPrefix + "?FindValue=" + searchValue + "&pageIndex=" + pageIndex + "&pageSize=" + pageSize + "&SortCell=" + SortCell + "&OrderType=" + OrderType; var targetDiv = "#" + divId; $.ajax({ url: urls, async: false, success: function (rs) { $(targetDiv).html(rs); }, error: function (er) { alert("分页数据加载出错"); } }); }
参数大家可以根据自己的需要去扩展
view 使用则需要两个view 一个是主要的容器view 一个则是数据view
主容器view 调用 数据view
<div id="IndexDiv" style=" 100%">
@{
Html.RenderAction("IndexList");
}
</div>
数据view 调用自定义分页控件
<div class="digg">
@Html.Pager("/Admin/IndexList", "IndexDiv", "", SortCell, OrderType, Total, pageIndex, pageSize)
</div>
这边的 class="digg" 是分页控件的样式,选中样式(即当前页)为span 下的 current
按照以上方法就可以实现一个静态分页了,而且是自己写的静态分页哦!!!!
如果大家没有什么好的分页方法介绍大家使用下:sp_cursoropen
具体如下:
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO create procedure [dbo].[PageDataSet] @sql nvarchar(4000), --要执行的sql语句 @currentpage int=2, --要显示的页码 @pagesize int=10, --每页的大小 @recordcount int=0 out, --记录数 @pagecount int=0 out --总页数 as set nocount on declare @p1 int exec sp_cursoropen @p1 output,@sql,@scrollopt=1,@ccopt=1,@rowcount=@pagecount output select @recordcount=@pagecount,@pagecount=ceiling(1.0*@pagecount/@pagesize) ,@currentpage=(@currentpage-1)*@pagesize+1 select @recordcount recordcount ,@pagecount pagecount,@currentpage currentpage exec sp_cursorfetch @p1,16,@currentpage,@pagesize exec sp_cursorclose @p1
这个分页方法可以返回 总记录数, 页数,
转载请注明出处