jquery使用ajax分页显示列表

工作中有个jsp项目有个需求有两张列表A和B，点击A中的某列再显示该列相关的B列表，一位懒惰的同事搪塞说不想用ajax来做觉得没有必要觉得很复杂，于是就我写了个例子出来，我只是想告诉他，其实这并不复杂，并且用ajax是最好的解决方案，只是因为他自己懒惰，不愿意接受新知识，不愿意接受别人的意见以及安于现状。这里用的是asp.net来写，而不是jsp, 不过实现原理基本上是一样的，例子写给人看的，不要浪费就放在blog上吧。

运行效果：



1：ajax数据传递使用了json数据，下载 Newtonsoft.Json.dll http://json.codeplex.com/
2：服务端代码(PageDataService.aspx PageDataService.aspx.cs)

引用

using System.IO;

using Newtonsoft.Json;

using Newtonsoft.Json.Converters;

代码：

namespace JQTestPage
{
public partial class PageDataService : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Response.Clear();

#region get parameter
String m = "";
if (!String.IsNullOrEmpty(Request["m"]))
{
m = Request["m"].ToString();
}
String cardid = "";
if (!String.IsNullOrEmpty(Request["cardId"]))
{
cardid = Request["cardId"].ToString();
}
String couponruleid = "";
if (!String.IsNullOrEmpty(Request["couponRuleId"]))
{
couponruleid = Request["couponRuleId"].ToString();
}
int pageindex = 0;
if (!String.IsNullOrEmpty(Request["iPage"]))
{
pageindex = int.Parse(Request["iPage"].ToString());
}
int pagesize = 10;
if (!String.IsNullOrEmpty(Request["pSize"]))
{
pagesize = int.Parse(Request["pSize"].ToString());
}
#endregion

JsonSerializer json = new JsonSerializer();
json.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
json.NullValueHandling = NullValueHandling.Ignore;
json.ObjectCreationHandling = ObjectCreationHandling.Replace;
json.MissingMemberHandling = MissingMemberHandling.Ignore;
StringWriter sw = new StringWriter();
JsonTextWriter writer = new JsonTextWriter(sw);
writer.Formatting = Formatting.Indented;
writer.QuoteChar = '"';
jo_retrun rs = GetRS(pageindex, pagesize, cardid, couponruleid);
json.Serialize(writer, rs);
string output = sw.ToString();
writer.Close();
sw.Close();
this.Response.Write(sw.ToString());

this.Response.End();
}

/// <summary>
/// 根据页码等条件获取返回数据
/// </summary>
private jo_retrun GetRS(int pPageIndex,int pPageSize,String pCardID, String pCouponRuleID)
{
jo_retrun temp = new jo_retrun();
temp.iPage = pPageIndex;
temp.pSize = pPageSize;
temp.tPage = 10;
temp.tSize = 100;
temp.cardId = pCardID;
temp.couponRuleId = pCouponRuleID;
List<jo_order> orders = new List<jo_order>();
for (int i = 0; i < pPageSize; i++)
{
jo_order order = new jo_order();
order.orderId = "000000" + "p:" + pPageIndex.ToString() + i.ToString();
order.rrn = "rrn" + "p:" + pPageIndex.ToString() + i.ToString();
order.merchantName = "mn" + "p:" + pPageIndex.ToString() + i.ToString();
orders.Add(order);
}
temp.OrderDetailVOList = orders;
return temp;
}
private class jo_retrun
{
public int iPage { get; set; }
public int pSize { get; set; }
public int tPage { get; set; }
public int tSize { get; set; }
public String cardId { get; set; }
public String couponRuleId { get; set; }
public List<jo_order> OrderDetailVOList { get; set; }
}
private class jo_order
{
public String orderId { get; set; }
public String rrn { get; set; }
public String merchantName { get; set; }
}
}
}

3 ： 使用了jquery1.7.2 下载地址：http://docs.jquery.com/Downloading_jQuery

代码：

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/ecmascript">
function GoPage(pPageIndex, pPageSize) {
//无论如何都清空吧
$("#DIV_CouponConsumeHis").html("");
$("#DIV_PageInfo").html("");
//参数
var pCardID = "123345566778";
var pIssueRuleNo = "00000000007";
$.ajax({
type: "post", //请求方式
url: "./PageDataService.aspx", //发送请求地址
data: {//发送的数据
m: "cr",
cardId: pCardID,
couponRuleId: pIssueRuleNo,
iPage: pPageIndex,
pSize: pPageSize
},
//请求成功后的回调函数有两个参数
success: function (data, textStatus) {
//$("#DIV_CouponConsumeHis").html(data);
var jsondata = $.parseJSON(data);
//当前页
var pageindex = parseInt(jsondata.iPage);
//页面大小
var pagesize = parseInt(jsondata.pSize);
//总页数
var totalpage = parseInt(jsondata.tPage);
//总记录数
var recordcount = parseInt(jsondata.tSize);
//妙购卡
var cardid = jsondata.cardId;
//发行规则编号
var issueruleno = jsondata.couponRuleId;
//列表
var orderlist = jsondata.OrderDetailVOList;

if (totalpage > 0 && orderlist != null && orderlist.length > 0) {
//表格
var tablestr = "";
tablestr = "<table cellpadding=\"1\" cellspacing=\"1\" border=\"0\" bgcolor=\"#DCDCDC\" align=\"center\">";
tablestr = tablestr + "<tr>";
tablestr = tablestr + "<td width=\"128px\">订单号</td>";
tablestr = tablestr + "<td width=\"128px\">交易日期</td>";
tablestr = tablestr + "<td width=\"128px\">订单金额</td>";
tablestr = tablestr + "<td width=\"128px\">优惠劵抵扣</td>";
tablestr = tablestr + "<td width=\"128px\">实际支付</td>";
tablestr = tablestr + "<td width=\"128px\">订单状态</td>";
tablestr = tablestr + "<td width=\"128px\">商户名称</td>";
tablestr = tablestr + "<td width=\"128px\">确认日期</td>";
tablestr = tablestr + "</tr>";
var i = 0;
for (i = 0; i < orderlist.length; i++) {
tablestr = tablestr + "<tr>";
tablestr = tablestr + "<td>" + orderlist[i].orderId + "</td>";
tablestr = tablestr + "<td>" + orderlist[i].rrn + "</td>";
tablestr = tablestr + "<td></td>";
tablestr = tablestr + "<td></td>";
tablestr = tablestr + "<td></td>";
tablestr = tablestr + "<td></td>";
tablestr = tablestr + "<td>" + orderlist[i].merchantName + "</td>";
tablestr = tablestr + "<td></td>";
tablestr = tablestr + "</tr>";
}
tablestr = tablestr + "</table>";
$("#DIV_CouponConsumeHis").html(tablestr);
//分页信息
//计算首页，前一页，后一页，最后一页(如果没有，则用-1表示)
var firstpage = -1;
var prepage = -1;
var nextpage = -1;
var lastpage = -1;
if (totalpage > 1) {
if (pageindex == 1) {
firstpage = -1;
prepage = -1;
nextpage = 2;
lastpage = totalpage;
} else if (pageindex == totalpage) {
firstpage = 1;
prepage = totalpage - 1;
nextpage = -1;
lastpage = -1;
} else {
firstpage = 1;
prepage = pageindex - 1;
nextpage = pageindex + 1;
lastpage = totalpage;
}
}
var pageinfostr = "";
//hidden
pageinfostr = pageinfostr + "<input id=\"h_pagecount\" name=\"h_pagecount\" type=\"hidden\" value=\"" + totalpage + "\"/>";
pageinfostr = pageinfostr + "<input id=\"h_pageindex\" name=\"h_pagecount\" type=\"hidden\" value=\"" + pageindex + "\"/>";
//分页
pageinfostr = pageinfostr + "共" + totalpage + "页  ";
if (pagesize == 1) {
pageinfostr = pageinfostr + "  第 <input id=\"t_currentpage\" name=\"t_currentpage\" type=\"text\" class=\"yamai\" value=\"" + pageindex + "\" style=\"ime-mode:Disabled\" onkeydown=\"TextOnlyNum(event," + pagesize + ")\"/> 页";
} else {
if (firstpage == -1) {
pageinfostr = pageinfostr + "I<<";
} else {
pageinfostr = pageinfostr + "<a href=\"javascript:GoPage(" + firstpage + "," + pagesize + ")\"> I<< </a>";
}
if (prepage == -1) {
pageinfostr = pageinfostr + "  <<";
} else {
pageinfostr = pageinfostr + "  <a href=\"javascript:GoPage(" + prepage + "," + pagesize + ")\"> << </a> ";
}
pageinfostr = pageinfostr + "  第 <input id=\"t_currentpage\" name=\"t_currentpage\" type=\"text\" class=\"yamai\" value=\"" + pageindex + "\" style=\"ime-mode:Disabled\" onkeydown=\"TextOnlyNum(event," + pagesize + ")\"/> 页";
if (nextpage == -1) {
pageinfostr = pageinfostr + "   >>";
} else {
pageinfostr = pageinfostr + ("   <a href=\"javascript:GoPage(" + nextpage + "," + pagesize + ")\"> >></a>");
}
if (lastpage == -1) {
pageinfostr = pageinfostr + "   >>I ";
} else {
pageinfostr = pageinfostr + "  <a href=\"javascript:GoPage(" + lastpage + "," + pagesize + ")\"> >>I </a>";
}
}
$("#DIV_PageInfo").html(pageinfostr);
} else {
$("#DIV_CouponConsumeHis").html("没有查询结果.");
$("#DIV_PageInfo").html("");
}
}
});
}

//只能输入正整数
function TextOnlyNum(e, pPageSize) {
// 响应回车
var key = window.event ? e.keyCode : e.which;
if (!((key >= 48 && key <= 57) || (key >= 96 && key <= 105) || (key == 8))) {
e.returnValue = false;
if (e.keyCode == 13) {
RespontEnter();
}
}
}
//相应页面输入，按回车
function RespontEnter(pPageSize) {
var pagecount = parseInt(document.getElementById("h_pagecount").value);
var pageindex = parseInt(document.getElementById("h_pageindex").value);
if (pagecount > 0) {
//获取页数
var currentpage = parseInt(document.getElementById("t_currentpage").value);
//等于当前页
if (currentpage == pageindex) {
document.getElementById("t_currentpage").value = pageindex;
currentpage = pageindex;
return;
}
//如果是0则改成1
if (currentpage == 0) {
document.getElementById("t_currentpage").value = 1;
currentpage = 1;
}
//最大页数
if (currentpage >= pagecount) {
document.getElementById("t_currentpage").value = pagecount;
currentpage = pagecount;
}
GoPage(currentpage, pPageSize);
} else {
document.getElementById("t_currentpage").value = 1;
}
}
</script>
<button type=button value="第一页" style="width:100px; height: 24px;" onclick="GoPage(1,10);">第一页</button>
<div id="DIV_CouponConsumeHis">
</div>
<div id="DIV_PageInfo">
</div>
</asp:Content>