Jquery+Ajax+Json+存储过程实现高效分页
之前在做分页时，很多朋友都是用Jquery分页插件，之前我就用的jquery.paper，有需要的朋友可以联系我，接下来小编给大家分享用Jquery+Ajax+Json+存储过程实现高效分页。
实现此功能用分页存储过程，pagination，js样式，废话不多了，具体请看下面代码
分页存储过程：PAGINATION
CREATEPROCEDURE[dbo].[PAGINATION] @FEILDSVARCHAR(),--要显示的字段 @PAGE_INDEXINT,--当前页码 @PAGE_SIZEINT,--页面大小 @ORDERTYPEBIT,--当为时则为desc当为时asc @ANDWHEREVARCHAR()='',--where语句不用加where @ORDERFEILDVARCHAR(),--排序的字段 @TABLENAMEVARCHAR()--查询的表明 as DECLARE@EXECSQLVARCHAR() DECLARE@ORDERSTRVARCHAR() DECLARE@ORDERBYVARCHAR() BEGIN setNOCOUNTon IF@ORDERTYPE= BEGIN SET@ORDERSTR='>(SELECTMAX(['+@ORDERFEILD+'])' SET@ORDERBY='ORDERBY'+@ORDERFEILD+'ASC' END ELSE BEGIN SET@ORDERSTR='<(SELECTMIN(['+@ORDERFEILD+'])' SET@ORDERBY='ORDERBY'+@ORDERFEILD+'DESC' END IF@PAGE_INDEX=--当页码是第一页时直接运行，提高速度 BEGIN IF@ANDWHERE='' SET@EXECSQL='SELECTTOP'+STR(@PAGE_SIZE)+''+@FEILDS+'FROM'+@TABLENAME+''+@ORDERBY ELSE SET@EXECSQL='SELECTTOP'+STR(@PAGE_SIZE)+''+@FEILDS+'FROM'+@TABLENAME+'WHERE'+@ANDWHERE+''+@ORDERBY END ELSE BEGIN IF@ANDWHERE='' BEGIN--以子查询结果当做新表时要给表名别名才能用 SET@EXECSQL='SELECTTOP'+STR(@PAGE_SIZE)+''+@FEILDS+'FROM'+@TABLENAME+'WHERE'+@ORDERFEILD+ @ORDERSTR+'FROM(SELECTTOP'+STR(@PAGE_SIZE*(@PAGE_INDEX-))+''+@ORDERFEILD+ 'FROM'+@TABLENAME+''+@ORDERBY+')ASTEMP)'+@ORDERBY END ELSE BEGIN SET@EXECSQL='SELECTTOP'+STR(@PAGE_SIZE)+''+@FEILDS+'FROM'+@TABLENAME+'WHERE'+@ORDERFEILD+ @ORDERSTR+'FROM(SELECTTOP'+STR(@PAGE_SIZE*(@PAGE_INDEX-))+''+@ORDERFEILD+ 'FROM'+@TABLENAME+'WHERE'+@ANDWHERE+''+@ORDERBY+')ASTEMP)AND'+@ANDWHERE+''+@ORDERBY END END EXEC(@EXECSQL)--这里要加括号 END
分页样式：
<styletype="text/css">
a,area{-moz-outline-style:none;blr:expression(this.onFocus=this.blur());text-decoration:none}
div.badoo{padding:px;text-align:center;}
div.badooa{border:pxsolid#ededed;padding:pxpx;color:#;border-radius:px;margin-right:px;}
div.badooa:hover{border:pxsolid#ffa;color:#ffa;}
div.badooa:active{border:pxsolid#ffa;margin-right:px;}
div.badoospan{border:pxsolid#EDEDED;padding:pxpx;color:#f;font-weight:bold;background:#FAFAFA;border-radius:px;margin-right:px;}
div.badoospan.disabled{border:pxsolid#EDEDED;padding:pxpx;color:#;margin-right:px;font-weight:;}
</style>
首先创建一般处理程序，读取数据库中内容，得到返回值.
创建文件，GetData.ashx.
我这里是用的存储过程，存储过程会再下面粘出来，至于数据只是实例，你们可根据需求自行读取数据
usingSystem;
usingSystem.Web;
usingSystem.Data.SqlClient;
usingSystem.Data;
usingSystem.Collections.Generic;
usingSystem.Web.Script.Serialization;
usingModel;
context.Response.ContentType="text/plain";
varpageIndex=context.Request["PageIndex"];
//判断当前索引存不存在，如果不存在则获取记录的总数。
if(string.IsNullOrEmpty(pageIndex))
{
//获取查询记录总数的sql语句
intcount=;
int.TryParse(newBLL.t_profit().SelectAllNum(),outcount);
context.Response.Write(count);
context.Response.End();
}
//当根据索引获取数据
else
{
intcurrentPageIndex=;
int.TryParse(pageIndex,outcurrentPageIndex);
SqlParameter[]parms=newSqlParameter[]{
newSqlParameter("@FEILDS",SqlDbType.NVarChar,),
newSqlParameter("@PAGE_INDEX",SqlDbType.Int,),
newSqlParameter("@PAGE_SIZE",SqlDbType.Int,),
newSqlParameter("@ORDERTYPE",SqlDbType.Int,),
newSqlParameter("@ANDWHERE",SqlDbType.VarChar,),
newSqlParameter("@ORDERFEILD",SqlDbType.VarChar,)
};
parms[].Value="id,name,sex,tel";//获取所有的字段
parms[].Value=pageIndex;//当前页面索引
parms[].Value=;//页面大小
parms[].Value=;//升序排列
parms[].Value="";//条件语句
parms[].Value="id";//排序字段
List<Book>list=newList<Book>();
using(SqlDataReadersdr=Yoodor.DAL.SqlHelper.ExecuteReader(CommandType.StoredProcedure,"PAGINATION",parms))
{
while(sdr.Read())
{
list.Add(newBook{id=sdr[].ToString(),name=sdr[].ToString(),sex=sdr[].ToString(),tel=sdr[].ToString()});
}
}
context.Response.Write(newJavaScriptSerializer().Serialize(list).ToString());//转为Json格式
}
publicstringid{get;set;}
publicstringname{get;set;}
publicstringsex{get;set;}
publicstringtel{get;set;}
样式代码：
<styletype="text/css">
a,area{-moz-outline-style:none;blr:expression(this.onFocus=this.blur());text-decoration:none}
div.badoo{padding:px;text-align:center;}
div.badooa{border:pxsolid#ededed;padding:pxpx;color:#;border-radius:px;margin-right:px;}
div.badooa:hover{border:pxsolid#ffa;color:#ffa;}
div.badooa:active{border:pxsolid#ffa;margin-right:px;}
div.badoospan{border:pxsolid#EDEDED;padding:pxpx;color:#f;font-weight:bold;background:#FAFAFA;border-radius:px;margin-right:px;}
div.badoospan.disabled{border:pxsolid#EDEDED;padding:pxpx;color:#;margin-right:px;font-weight:;}
</style>
js代码
<scripttype="text/javascript">
$(function(){
$.post("GetData.ashx",null,function(data){
vartotal=data;
PageClick(,total,);
});
PageClick=function(pageIndex,total,spanInterval){
$.ajax({
url:"GetData.ashx",
data:{"PageIndex":pageIndex},
type:"post",
dataType:"json",
success:function(data){
//索引从开始
//将当前页索引转为int类型
varintPageIndex=parseInt(pageIndex);
//获取显示数据的表格
vartable=$("#content");
//清楚表格中内容
$("#contenttr").remove();
//向表格中添加内容
for(vari=;i<data.length;i++){
table.append(
$("<tr><td>"+
data[i].id
+"</td><td>"+
data[i].name
+"</td><td>"+
data[i].sex
+"</td><td>"+
data[i].tel
+"</td></tr>")
);
}//for
//创建分页
//将总记录数结果得到总页码数
varpageS=total
if(pageS%==)pageS=pageS/;
elsepageS=parseInt(total/)+;
var$pager=$("#pager");
//清楚分页div中的内容
$("#pagerspan").remove();
$("#pagera").remove();
//添加第一页
if(intPageIndex==){
//$pager.append("<spanclass='disabled'>第一页</span>");
}
else{
//varfirst=$("<ahref='javascript:void()'first='"++"'>第一页</a>").click(function(){
//PageClick($(this).attr('first'),total,spanInterval);
//returnfalse;
//});
//$pager.append(first);
}
//添加上一页
if(intPageIndex==)
$pager.append("<spanclass='disabled'>上一页</span>");
else{
varpre=$("<ahref='javascript:void()'pre='"+(intPageIndex-)+"'>上一页</a>").click(function(){
PageClick($(this).attr('pre'),total,spanInterval);
returnfalse;
});
$pager.append(pre);
}
//设置分页的格式这里可以根据需求完成自己想要的结果
varinterval=parseInt(spanInterval);//设置间隔
varstart=Math.max(,intPageIndex-interval);//设置起始页
varend=Math.min(intPageIndex+interval,pageS)//设置末页
if(intPageIndex<interval+){
end=(*interval+)>pageS?pageS:(*interval+);
}
if((intPageIndex+interval)>pageS){
start=(pageS-*interval)<?:(pageS-*interval);
}
//生成页码
for(varj=start;j<end+;j++){
if(j==intPageIndex){
varspanSelectd=$("<spanclass='current'>"+j+"</span>");
$pager.append(spanSelectd);
}//if
else{
vara=$("<ahref='javascript:void()'>"+j+"</a>").click(function(){
PageClick($(this).text(),total,spanInterval);
returnfalse;
});
$pager.append(a);
}//else
}//for
//上一页
if(intPageIndex==Math.ceil(total/)){
$pager.append("<spanclass='disabled'>下一页</span>");
}
else{
varnext=$("<ahref='javascript:void()'next='"+(intPageIndex+)+"'>下一页</a>").click(function(){
PageClick($(this).attr("next"),total,spanInterval);
returnfalse;
});
$pager.append(next);
}
//最后一页
if(intPageIndex==pageS){
//$pager.append("<spanclass='disabled'>最后一页</span>");
}
else{
//varlast=$("<ahref='javascript:void()'last='"+pageS+"'>最后一页</a>").click(function(){
//PageClick($(this).attr("last"),total,spanInterval);
//returnfalse;
//});
//$pager.append(last);
}
}//sucess
});//ajax
};//function
});//ready
</script>
<tableid="content">
</table>
<divid="pager"class="badoo"></div>
///<summary>
///ExecuteaSqlCommandthatreturnsaresultsetagainstthedatabasespecifiedintheconnectionstring
///usingtheprovidedparameters.
///</summary>
///<paramname="connectionString">一个有效的数据库连接字符串</param>
///<paramname="cmdType">SqlCommand命令类型(存储过程，T-SQL语句，等等。)</param>
///<paramname="cmdText">存储过程的名字或者T-SQL语句</param>
///<paramname="commandParameters">以数组形式提供SqlCommand命令中用到的参数列表</param>
///<returns>ASqlDataReadercontainingtheresults</returns>
publicstaticSqlDataReaderExecuteReader(CommandTypecmdType,stringcmdText,paramsSqlParameter[]commandParameters)
{
SqlCommandcmd=newSqlCommand();
SqlConnectionconn=newSqlConnection(connectionString);
//weuseatry/catchherebecauseifthemethodthrowsanexceptionwewantto
//closetheconnectionthrowcode,becausenodatareaderwillexist,hencethe
//commandBehaviour.CloseConnectionwillnotwork
try
{
PrepareCommand(cmd,conn,null,cmdType,cmdText,commandParameters);
SqlDataReaderrdr=cmd.ExecuteReader(CommandBehavior.CloseConnection);
cmd.Parameters.Clear();
returnrdr;
}
catch(Exceptionex)
{
conn.Close();
thrownewException(ex.Message);
}
}
以上就是本文使用Jquery+Ajax+Json+存储过程实现高效分页的全部内容，希望大家喜欢。