客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
小弟新手，求大神有更好的解决方案，指教下~ 以前做项目，用过GridView的刷新分页，也用过EasyUI的封装好的分页技术，最近在老项目的基础上加新功能，迫于需求，自己没事琢磨了个Ajax无刷新分页技术， 也在百度看了下， 写的都不是很系统，在这里写个系统的，简单的，方便大家研究下。 系统支持 和数据库交互的无刷新分页、删除后的 当前页 定位、在查询条件下的 分页 ,有数据，显示删除，列表，没有只显示新增按钮。 项目采取的后台拼html，图了个简单，方便区分分页js，在后台写html，增加服务器压力，第一选择还是传JSON哈，谢谢楼下大神回答。 我写的这个无刷新分页用的最重要的sql 语句就是 sql = @"select * from (select ROW_NUMBER() over (ORDER BY CREATEDATE) rownum,a.goodsid,a.goodsname,a.itemname,a.price FROM GoodsOrderAccept a " + selectsql + ") t where t.rownum>='" + ((page - 1) * 10 + 1) + "' and t.rownum<='" + page * 10 + "'"; 相信有些大神，看到这里，已经知道我采取的什么方法了，重点就是 ROW_NUMBER()，利用它和Page变量，从前台页面请求不同的页码，显示不同的数据。 下面看一下项目的目录结构： List.aspx就是页面，Page.ashx就是实现的分页技术，JSONObject.cs在后台对JSON序列化成对象。 List.aspx页面执行如下： 如页面所示，支持checkbox，单删除，多删除. 下面开始贴代码： List.aspx页面代码如下： 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="AjaxPage.List" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 7 <title>分页功能演示</title> 8 <script type="text/javascript"> 9 $(function () { 10 11 //初始化首页数据以及各种变量 12 $.ajax({ 13 type: "POST", 14 url: "Page.ashx", 15 dataType: "json", 16 data: { 17 action: "getFirstPageAndVariable" 18 }, 19 success: function (data) { 20 if (data.outStr != "" && data.pagecount != "0") { 21 //有数据加载数据列表，显示数据列表，显示删除按钮，以及分页按钮 22 document.getElementById('btn_delete').style.display = ""; 23 document.getElementById('div_list').style.display = ""; 24 document.getElementById('div_page').style.display = ""; 25 $("#tbody_list").empty(); 26 $("#tbody_list").append(data.outStr); 27 //把总页数赋值给变量 28 $('#<%=hid_last.ClientID %>').val(data.pagecount); 29 //初始化页数输入框 30 $("#text_page").val($('#<%=hid_shou.ClientID %>').val()); 31 //将上一页和下一页变量赋值为首页变量 32 $('#<%=hid_change.ClientID %>').val($('#<%=hid_shou.ClientID %>').val()); 33 } 34 } 35 }); 36 //绑定按钮事件 37 $("#btn_search").bind("click", btn_search); 38 $("#btn_delete").bind("click", btn_delete); 39 //查询事件 40 function btn_search(event) { 41 42 //查询输入框不为空的话，才执行查询事件 43 //if ($("#text_search").val().toString().replace(/[ ]/g, "") != "") { 44 $.ajax({ 45 type: "POST", 46 url: "Page.ashx", 47 dataType: "json", 48 data: { 49 action: "getFirstPageAndVariable", 50 search: $("#text_search").val() 51 }, 52 success: function (data) { 53 if (data.outStr != "" && data.pagecount != "0") { 54 //有数据加载数据列表，显示数据列表，显示删除按钮，以及分页按钮 55 document.getElementById('btn_delete').style.display = ""; 56 document.getElementById('div_list').style.display = ""; 57 document.getElementById('div_page').style.display = ""; 58 $("#tbody_list").empty(); 59 $("#tbody_list").append(data.outStr); 60 //把总页数赋值给变量 61 $('#<%=hid_last.ClientID %>').val(data.pagecount); 62 //初始化页数输入框 63 $("#text_page").val($('#<%=hid_shou.ClientID %>').val()); 64 //模糊查询后，将上一页和下一页变量赋值为首页变量 65 $('#<%=hid_change.ClientID %>').val($('#<%=hid_shou.ClientID %>').val()); 66 } 67 } 68 }); 69 //} 70 } 71 //删除事件 72 function btn_delete(event) { 73 var deleteData = ""; 74 $("#tbody_list tr").each(function () { 75 if ($($(this).children().get(0)).find("input")[0].status) { 76 deleteData += $($(this).children().get(0)).find("input")[0].value + "," + $($(this).children().get(0)).find("input")[0].value + "|"; 77 } 78 }); 79 if (deleteData == "") { 80 alert("不能提交空数据！"); 81 return false; 82 } 83 if (!confirm("确定要删除吗？")) { 84 return false; 85 } 86 $.ajax({ 87 type: "POST", 88 url: "Page.ashx", 89 dataType: "json", 90 data: { 91 action: "deleteData", 92 deleteData: deleteData 93 }, 94 success: function (data) { 95 if (data.status == "success") { 96 //初始化当前页数据以及各种变量 97 $.ajax({ 98 type: "POST", 99 url: "Page.ashx", 100 dataType: "json", 101 data: { 102 action: "getDeletePageAndVariable", 103 hid_change: $('#<%=hid_change.ClientID %>').val(), 104 search: $("#text_search").val() 105 }, 106 success: function (data) { 107 if (data.pagecount != "0") { 108 $("#tbody_list").empty(); 109 $("#tbody_list").append(data.outStr); 110 //把总页数赋值给变量 111 $('#<%=hid_last.ClientID %>').val(data.pagecount); 112 //初始化页数输入框 113 $("#text_page").val(data.hid_change); 114 //将上一页和下一页变量赋值为首页变量 115 $('#<%=hid_change.ClientID %>').val(data.hid_change); 116 } 117 } 118 }); 119 } 120 } 121 }); 122 } 123 //加载首页点击事件 124 $("#a_shou").click(function () { 125 $.ajax({ 126 type: "POST", 127 url: "Page.ashx", 128 dataType: "json", 129 data: { 130 action: "clickPageAndGetData", 131 page: $('#<%=hid_shou.ClientID %>').val(), 132 search: $("#text_search").val() 133 }, 134 success: function (data) { 135 if (data.outStr != "") { 136 $("#tbody_list").empty(); 137 $("#tbody_list").append(data.outStr); 138 $("#text_page" 全部评论
专题导读
热门推荐
热门话题
 阅读排行榜
|
请发表评论