关于Ajax无刷新分页技术的一些研究c#

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Node.js›Node.js教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

小弟新手，求大神有更好的解决方案，指教下~

以前做项目，用过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" 
                       
                    
                     
                      



鲜花




握手




雷人




路过




鸡蛋