ajax-jquery无刷新分页
2012-11-16 20:01
267 查看
2012-05-15 22:10
代码比较乱,没有具体函数化,注释已经和清晰。
前台html代码:
后台C#代码(该代码在一般处理程序中写):
前台JS代码:
//ajax无刷新分页 function btnList() { var current = 1; $.post("NoRefreshPage.ashx", { "action": "pagenum" }, function (data, status) {//func开始 if (status == "success") {//if开始 $("#trPage").empty(); $("#trPage").append("<td title=tdprev><a href=''>上一页</a></td>"); //添加上一页 $("#trPage td[title='tdprev']").click(function (e) { e.preventDefault(); if (parseInt(current) > 1) { $("#trPage td[title=td" + (current - 1) + "]").click(); } else alert("已经在首页"); }); for (var i = 1; i <= data; i++) { //for开始 var tdPage = "<td title=td" + i + "><a href=''>" + i + "</a></td>"; $("#trPage").append(tdPage); } //for循环结束 $("#trPage").append("<td title=tdnext><a href=''>下一页</a></td>"); //添加下一页 $("#trPage td[title='tdnext']").click(function (e) { e.preventDefault(); if (parseInt(current) < parseInt(data)) { current++; $("#trPage td[title=td" + current + "]").click(); } else { alert("已经在末页"); } }); $("#trPage td").click( function (e) {//func2开始 e.preventDefault(); //取消导向链接 if ($(this).text() != "上一页" && $(this).text() != "下一页") current = $(this).text(); //记录当前页 //alert(current); $.post("NoRefreshPage.ashx", { "action": "page", "pageindex": $(this).text() }, function (data, status) { //func3开始 if (status == "success") {//if2开始 var list = $.parseJSON(data); $("#order").empty(); for (var i = 0; i < list.length; i++) {//for开始 var li = $("<li >orderid=" + list[i].orderid + "| customid=" + list[i].customid + "| employid=" + list[i].employid + " <a id=" + list[i].orderid + " href=''> 删除</a></li>"); $("#order").append(li); } //for循环结束 $("#order li a").click(function (e) {//绑定 删除 事件 e.preventDefault(); // alert($(this).attr("id")); if (confirm("确认删除")) {//确认提示 $.post("NoRefreshPage.ashx", { "action": "remove", "rid": $(this).attr("id") }, function (data, status) { if (status == "success") { if (data == "ok") { $("#order li:eq(" + this + ")").remove(); $("#trPage td[title=td" + current + "]").click(); //单击重新获取当前页. } else { alert("错误"); } } //if else { alert("删除失败"); } } // fun end ); //post end } }); //绑定删除事件结束 } //if2结束 else { alert("错误页码"); } } //func3结束 ); //post结束 }); //func2、页码事件结束 } //if结束/ else { alert("获取分页失败"); } }); //func、post结束/ } //整个函数结束
代码比较乱,没有具体函数化,注释已经和清晰。
前台html代码:
<div> <ul id="order"></ul> <table><tr id="trPage"></tr></table> <input type="button" id="Button1" onclick="btnList()" value="显示分页" /> </div>
后台C#代码(该代码在一般处理程序中写):
public class NoRefreshPage : IHttpHandler { static string sqlstr =@"Data Source=.\sqlexpress;Initial Catalog=Northwind;Integrated Security=True"; SqlConnection sqlconn = new SqlConnection(sqlstr); public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string action = context.Request["action"]; if (action == "pagenum") { context.Response.Write( GetPageNum()); } else if (action == "page") { int pageindex=Convert.ToInt32( context.Request["pageindex"]); string jsText = GetContextByPageIndex(pageindex); context.Response.Write(jsText); } else if (action == "remove") { string OrderID = context.Request["rid"]; int result = DelOrdersByID(OrderID); if (result >= 0) { context.Response.Write("ok"); } } } /// <summary> /// 根据ID删除对应的数据行 /// </summary> /// <param name="OrderID">ID</param> /// <returns>受影响行数</returns> private int DelOrdersByID(string OrderID) { string sql = "delete from orders where OrderID=@OrderID"; SqlCommand cmd = new SqlCommand(sql, sqlconn); cmd.Parameters.AddWithValue("OrderID", OrderID); sqlconn.Open(); int result = cmd.ExecuteNonQuery(); sqlconn.Close(); return result; } /// <summary> /// 根据页索引获取对应的数据 /// </summary> /// <param name="pageindex">页索引</param> /// <returns>经过JSON序列化的字符串</returns> privat 4000 e string GetContextByPageIndex(int pageindex) { string sql = "select * from ( select *,ROW_NUMBER() over(order by orderid) rownum " + " from orders where OrderID between 10263 and 10611 ) temp " + " where temp.rownum >=@startindex and temp.rownum<=@endindex";//这边应该使用存储过程,测试作用,直接写sql语句了. SqlDataAdapter sda = new SqlDataAdapter(sql, sqlconn); DataSet ds = new DataSet(); sda.SelectCommand.Parameters.AddWithValue("startindex", (pageindex - 1) * 10 + 1); sda.SelectCommand.Parameters.AddWithValue("endindex", pageindex * 10); sda.Fill(ds, "order"); List<Orders> list = new List<Orders>(); foreach (DataRow dr in ds.Tables[0].Rows) { list.Add(new Orders { orderid = dr[0].ToString(), customid = dr[1].ToString(), employid = dr[2].ToString() }); } JavaScriptSerializer jss = new JavaScriptSerializer(); string jsText = jss.Serialize(list); return jsText; } /// <summary> /// 获取总页数 /// </summary> /// <param name="oneRow">每页行数</param> /// <returns>总页数</returns> private int GetPageNum(int oneRow) { string sql = "select count(*) from orders where OrderID between 10263 and 10611"; SqlCommand cmd = new SqlCommand(sql, sqlconn); sqlconn.Open(); int rownum = Convert.ToInt32(cmd.ExecuteScalar()); sqlconn.Close(); if (rownum % oneRow != 0) { rownum++; } return rownum / oneRow; }
相关文章推荐
- jQuery+Ajax实现无刷新分页
- asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页
- asp.net mvc基于jQuery+Ajax实现无刷新分页
- jQuery+AJAX实现无刷新分页滚动下拉加载
- 无刷新分页控件(原创)(jQuery+json+ashx)(Ajax)
- asp.net中利用Jquery+Ajax+Json实现无刷新分页
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
- jQuery+AJAX+Struts实现无刷新分页
- php+ajax+jquery 实现无刷新分页以及js缓存
- JQuery+Ajax无刷新分页
- Asp.Net分页方法:JQuery插件实现Ajax无刷新分页、AspNetPager分页控件实现分页
- Ajax无刷新分页(Access+JQuery+JSON)
- Asp.Net分页方法:JQuery插件实现Ajax无刷新分页、AspNetPager分页控件实现分页
- Jquery+php+mysql实现上拉加载更多,后端CI,超详细,有示例(其实就是ajax无刷新分页)
- asp.net中利用Jquery+Ajax+Json实现无刷新分页
- asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
- JQuery+Ajax无刷新分页的实例代码
- jQuery+Ajax+PHP无刷新分页
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现 加上你的CSS完全可以与EXT媲美哦