jquery使用ajax分页显示列表
来源：互联网 发布：网络对我们的好处10条 编辑：程序博客网 时间：2024/05/16 10:34
工作中有个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>
- jquery使用ajax分页显示列表
- 使用Ajax+JQuery构造分页查询列表
- jQuery+Ajax分页显示数据
- ajax获取json数据使用jquery分页插件显示
- 使用jQuery+ajax实现级下拉列表的级联显示
- 使用jquery DataTable和ajax向页面显示数据列表
- 基于Jquery+Ajax+Json实现分页显示
- 基于Jquery+Ajax+Json实现分页显示
- 基于Jquery+Ajax+Json实现分页显示
- 列表分页查询的实现jquery 和Ajax的联合使用 HTML页面
- jquery+ajax 读取数据显示列表
- 分页处理，使用ajax局部刷新列表
- jquery列表页悬浮显示图片 分页显示
- jquery实现ajax查询后台数据列表，支持分页
- 使用PHP+JQuery+Ajax分页的实现
- 使用PHP+JQuery+Ajax分页的实现
- 使用jquery-pagination实现Ajax分页
- jQuery+json，分页显示数据列表，HTML+CSS，固定表头
- eclipse svn插件 状态图标 版本号 不能显示的解决办法
- bbs论坛数据库设计过程中遇到的问题，请高手解答，谢谢
- 如何结束线程运行
- bbs论坛数据库设计遇到的问题，哪位大虾来帮忙解答一下？谢谢
- dos2unix命令（windows下编辑linux文本要用）
- jquery使用ajax分页显示列表
- oracle之创建用户及登陆
- 关于无状态会话bean需要组件池存放多个实例的原因
- Html知识积累连载(03)——html全局结构与html的头元素
- 夏季保湿，最常见误区
- oracle如何新建一个用户，并赋予权限
- VC++mfc 用odbc 访问Oracle数据库里的表，能访问到系统表，但自己建的却不能访问，这是为什么？
- PyQt及Eric 5的安装
- 设计模式之代理模式
