通过Jquery ajax 静态分页
本分页功能主要是实现了：通过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
这个分页方法可以返回 总记录数， 页数，
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于通过Jquery ajax 静态分页的详细内容...