本文介绍了一种使用AjaxPro实现的前后端分离的搜索及分页功能，详细展示了前端JavaScript和后端C#代码实现方式，并提供了web.config配置示例。
==================================前台：搜索并分页
<!--AjaxPro.dll 搜索并分页开始-->
<input id="btnSearchBooks" onclick="showContent2('first');" class="btn1" type="button" value="搜索" /></td>
<script language="javascript" type="text/javascript">
var pageNo2 =0; //当前页码
function showContent2(op){
var str=$('txtBookName').value;
var strUid=$('<%=hidUid.ClientID%>').value;
if(str!=''&&strUid!=''){
$('<%=sonContentRight1.ClientID %>').style.display="none";
$('<%=sonContentRight2.ClientID %>').style.display="none";
}
else
{
$('<%=sonContentRight1.ClientID %>').style.display="block";
$('<%=sonContentRight2.ClientID %>').style.display="block";
}
var pageSize=20;//每页数据条数
var dtObj = new Object(); //对象实例化
dtObj=JYWebBook.shop.shop1.BindAjaxSearchBook(strUid,str).value; //从后台得到查询的数据
var totalPage=0; //总页数
var totalRecord = dtObj.Rows.length; //总记录数
if((dtObj.Rows.length%pageSize)==0)
totalPage = dtObj.Rows.length/pageSize;
else
totalPage = Math.ceil(dtObj.Rows.length/pageSize);
if(op == "first")
{//首页
pageNo2 = 0;
}
else if(op == "prev")
{//上一页
if(pageNo2>0)
pageNo2-=1;
else
pageNo2=0;
}
else if(op == "next")
{//下一页
if(pageNo2<totalPage-1)
pageNo2+=1;
else
pageNo2 = totalPage-1;
}
else if(op == "last")
{//尾页
pageNo2=totalPage-1;
}
else if(op == "jump")
{//跳转到第几页
if($('txtJump2').value.search("^-?//d+$")==0 && $('txtJump2').value!='')
{
pageNo2=stringToInteger(document.getElementById('txtJump2').value);
if(0<pageNo2 && pageNo2<=totalPage){
pageNo2=stringToInteger(document.getElementById('txtJump2').value)-1;
}
else{
alert('跳转页数不能小于第一页或大于总页数！');
if(pageNo2>totalPage)
pageNo2=totalPage-1;
if(0>pageNo2)
pageNo2 = 0;
}
}else{alert('请输入一个整数！');}
}
else{pageNo2=0;}
var content = "";
var startRecord = pageNo2*pageSize;
var endRecord = 0;
if(pageNo2>=totalPage-1)
endRecord = totalRecord;
else
endRecord = (pageNo2+1)*pageSize;
content = "<table width=/"100%/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/" ><tr><td>";
for(var i=startRecord;i<endRecord;i++)
{
var strDis='';
var strDecoration='none';
if(dtObj.Rows[i]["Nprice"]=='0.00')
strDis='none';
else{
strDis='block';
strDecoration='line-through';
}
var strPicPath='';
if(dtObj.Rows[i]["picpath"]=='../images/noPic.gif')
strPicPath='/images/noPic.gif';
else
strPicPath='/publishManage/'+dtObj.Rows[i]["picpath"];
content += "<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/" style='float:left;width:140px;height:215px;'><tr>";
content += "<td style=/"text-align: center;height:140px; width:140px/" valign=/"top/"><div style=/"border:1px solid #999999;width:106px; padding:2px 0 2px ; text-align:center/">";
content +="<a href='"+dtObj.Rows[i]["uid"]+"-b"+dtObj.Rows[i]["book_id"]+"' title='"+dtObj.Rows[i]["book_name"]+"'>";
content += "<img style='width:100px;height:130px; border:0px' src='"+strPicPath+"' alt='"+dtObj.Rows[i]["book_name"]+"' />";
content += "</a></div></td></tr>";
content +="<tr><td style=/"text-align: center;height:34px;border:0px solid #333/" valign=/"top/">";
content +="<a class='book' href='"+dtObj.Rows[i]["uid"]+"-b"+dtObj.Rows[i]["book_id"]+"' title='"+dtObj.Rows[i]["book_name"]+"'>";
content +="《<span style=/"color:#000; font-size:13px;border:0px solid #333; font-weight:bold/">"+dtObj.Rows[i]["book_name"].substring(0,15)+"</span>";
content +="》</a></td></tr>";
content +="<tr><td style=/"text-align:center;height:15px;color:#000;/" >定价：￥<span style='text-decoration:"+strDecoration+"'>"+dtObj.Rows[i]["Dprice"]+"</span></td></tr>";
content +="<tr><td style=/"text-align:center;color:red;height:18px;/" ><div style='margin-bottom:-20px;display:"+strDis+"'>特价：￥"+dtObj.Rows[i]["Nprice"]+"</div> </td></tr><tr><td style='height:10px;'> </td></tr></table>";
}
content += "</td></tr><tr align=/"center/" style='font-size:11.5px;'>";
content += "<td><div style='width:390px;height:21px;float:left;text-align:left;padding-top:7px;border:1px solid #c0dbf8;background:#d6ecfe;border-right:0px'> 共 <span style='color:red'>"+totalRecord+"</span> 条数据 "
+"共 <span style='color:red'>"+totalPage+"</span> 页 当前第 <span style='color:red'>"+(pageNo2+1)+"</span> 页 </div>"
+"<div style='float:left;height:26px;border:1px solid #c0dbf8;background:#d6ecfe;padding-top:2px;border-left:0px'><input type='button' style='border:1px solid #c0dbf8;background:#d6ecfe;height:18px;width:30px;' onClick='showContent2(/"first/")' value='首页' /> <input type='button' style='border:1px solid #c0dbf8;background:#d6ecfe;height:18px;width:45px;' id='linkPrev2' onClick='showContent2(/"prev/")' value='上一页' /> "
+"<input type='button' style='border:1px solid #c0dbf8;background:#d6ecfe;height:18px;width:45px;' id='linkNext2' onClick='showContent2(/"next/")' value='下一页' /> <input type='button' style='border:1px solid #c0dbf8;background:#d6ecfe;height:18px;width:30px;' onClick='showContent2(/"last/")' value='尾页' /> "
+"跳转到第<input type='text' style='border:1px solid #333;height:16px;width:25px;' id='txtJump2' />页 <input id='btnJump2' class='btn1' style='width:25px;height:20px' type='button' onClick='showContent2(/"jump/");' style='width:25px' value='GO' /> </div></td>";
content += "</tr>";
content += "</table>";
window.document.getElementById("spContent").innerHTML=content;
}
</script>
<!--AjaxPro.dll 搜索并分页结束-->
================================================后台
protected void Page_Load(object sender, EventArgs e)
{
//这的shop1是指页面类的类名。如有命名空间，则需要写上完整的命名空间（如：namespaces.pageclass）
//注意在web.config里面要加这句<httpHandlers><add verb="*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/></httpHandlers>
AjaxPro.Utility.RegisterTypeForAjax(typeof(JYWebBook.shop.shop1), this.Page);//要加上this.Page，否则在前台有可能取不到命名空间
}
[AjaxPro.AjaxMethod]//店铺内搜索数据绑定
public DataTable BindAjaxSearchBook(string strUid, string strBookName)
{
strWhere = " where uid='" + strUid.Trim() + "' and a.book_name like '%" + strBookName.Trim() + "%' ";
SqlDataReader dr = null;
dr = ecadb.getAjaxProPager(strWhere);
DataTable dt = tools.ConvertDataReaderToDataTable(dr);
return dt;
}
============================================web.config配置文件
<system.web>
<httpHandlers>
<!--AjaxPro调用<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>-->
<add verb="*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
</system.web>
扫一扫
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
