Jquery无刷新分页
一直想做一个Jquery 的无刷新分页，
最近整理了一下：
１、查询条件在前台拼好当参数传至后台，
２、页面第一次加载时数据由前台ajax至后台获取，数据获取方法和展式方法统一。
３、后台通过RowNumber获取分页数据
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductSingle.aspx.cs" Inherits="jsnh_dzd.Pop.ProductSingle" %> 2 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>客户列表单选</title> 7 <!-- 防止重新打开页面形式的对话框 --> 8 <base target="_self" /> 9 <link rel="stylesheet" href="../css/jquery.ui.all.css"> 10 <script src="../js/jquery-1.8.2.js"></script> 11 <script src="../js/jquery.ui.core.js"></script> 12 <script src="../js/jquery.ui.widget.js"></script> 13 <script src="../js/jquery.ui.button.js"></script> 14 <link href="../Css/AllUse.css" rel="stylesheet" type="text/css" /> 15 <script src="../JS/Common.js" type="text/javascript"></script> 16 <style type="text/css"> 17 #datadiv table 18 { 19 border-collapse: collapse; 20 border-spacing: 0px; 21 width: 100%; 22 border: #000 solid 0px; 23 background-color:White; 24 } 25 #datadiv table td 26 { 27 border: 1px solid #000; 28 height: 25px; 29 text-align: center; 30 31 } 32 #datadiv table th 33 { 34 background: #EFEFEF; 35 36 border: #000 solid 1px; 37 white-space: nowrap; 38 height: 21px; 39 border-top: 0px; 40 border-left: 0px; 41 } 42 </style> 43 <script type="text/javascript"> 44 $(function () { 45 $("#PageSize").text(G_PageSize); 46 GetData(1); 47 }) 48 function GetData(Page) { 49 //查询条件 50 var sqlwhere = ""; 51 var ProductID = $("#ProductID").val(); 52 var cProductName = $("#cProductName").val(); 53 if (ProductID.length > 0) { 54 sqlwhere += " ProductID like '%" + ProductID + "%'"; 55 } 56 if (cProductName.length > 0) { 57 if (sqlwhere.length > 0) { 58 sqlwhere += " and "; 59 } 60 sqlwhere += " cProductName like '%" + cProductName + "%'"; 61 } 62 //alert(sqlwhere); 63 //sqlwhere = encodeURIComponent(escape(sqlwhere)); // escape(sqlwhere); 64 //alert(sqlwhere); 65 $.ajax({ 66 type: "POST", 67 url: "ProductSingle.aspx/GetData", 68 data: "{ Page:" + Page + ",PageSize:" + G_PageSize + ",\"sqlwhere\": \"" + sqlwhere + "\" }", 69 contentType: "application/json; charset=utf-8", 70 dataType: "json", 71 success: function (msg) { 72 var result = eval("(" + msg.d + ")"); //$.parseJSON("'"+msg.d+"'"); 73 //alert(result.PageCount); 74 //分页信息 75 $("#PageCount").text(result.PageCount); 76 $("#Page").text(Page); 77 //alert(Math.ceil(result.PageCount / G_PageSize)); 78 $("#PageNum").text(Math.ceil(result.PageCount / G_PageSize)); 79 //数据信息 80 var DataStr = "<tbody>"; 81 for (var i = 0; i < result.QueryData.length; i++) { 82 DataStr += "<tr style='background-color:rgb(229, 242, 248);'><td width='20%'>" + result.QueryData[i].ProductID + 83 "</td><td width='30%'>" + result.QueryData[i].cProductName + "</td><td width='30%'>" + result.QueryData[i].cSpecification + 84 "</td><td width='20%'>" + result.QueryData[i].cMeasureUnit + "</td></tr>"; 85 } 86 DataStr += "</tbody>"; 87 $("#DataTable").html(DataStr); 88 //行点击事件 89 $("#DataTable tr").click(function () { 90 //alert(0); 91 $(this).css("background-color", "yellow").siblings().css("background-color", "rgb(229, 242, 248)"); 92 //alert($(this).find("td:eq(0)").text()); 93 $("#SelectedProductID").val($(this).find("td:eq(0)").text()); 94 $("#SelectedcProductName").val($(this).find("td:eq(1)").text()); 95 $("#SelectedcSpecification").val($(this).find("td:eq(2)").text()); 96 $("#SelectedcMeasureUnit").val($(this).find("td:eq(3)").text()); 97 }); 98 SetPageBut(); 99 }, 100 error: function (xhr, msg) { alert(msg); } 101 }); 102 } 103 //查询 104 function DoQuery() { 105 ClearSelect(); 106 GetData(1); 107 } 108 //清空选择的值 109 function ClearSelect() { 110 $("#SelectedProductID").val(''); 111 } 112 //分页按钮事件 113 function DoPage(Type) { 114 ClearSelect(); 115 SetPageBut(); 116 //alert(Type); 117 var toPage = parseInt($("#Page").text()); 118 switch (Type) { 119 case "First": 120 toPage = 1; 121 break; 122 case "Prep": 123 toPage = toPage - 1; 124 break; 125 case "Next": 126 toPage = toPage + 1; 127 break; 128 case "Last": 129 default: 130 toPage = parseInt($("#PageNum").text()); 131 break; 132 } 133 //alert(toPage); 134 GetData(toPage); 135 136 } 137 //设置分页按钮 138 function SetPageBut() { 139 var Page = $("#Page").text(); 140 //alert(Page); 141 var PageNum = $("#PageNum").text(); 142 //alert(PageNum); 143 $("#FirstPage").removeAttr("disabled"); 144 $("#PrepPage").removeAttr("disabled"); 145 $("#NextPage").removeAttr("disabled"); 146 $("#LastPage").removeAttr("disabled"); 147 if (Page == 1) { 148 $("#FirstPage").attr("disabled", "disabled"); 149 $("#PrepPage").attr("disabled", "disabled"); 150 } 151 if (Page == PageNum) { 152 $("#NextPage").attr("disabled", "disabled"); 153 $("#LastPage").attr("disabled", "disabled"); 154 } 155 if (PageNum == 0) { 156 $("#FirstPage").attr("disabled", "disabled"); 157 $("#PrepPage").attr("disabled", "disabled"); 158 $("#NextPage").attr("disabled", "disabled"); 159 $("#LastPage").attr("disabled", "disabled"); 160 } 161 } 162 //重置事件 163 function DoReset() { 164 $("#ProductID").val(''); 165 $("#cProductName").val(''); 166 } 167 //选择事件 168 function DoSelect() { 169 var selectCustomId = $("#SelectedProductID").val(); 170 if (selectCustomId.length == 0) { 171 alert("请选择一个商品"); 172 return false; 173 } 174 var result = "{\"ProductID\":\"" + selectCustomId + "\",\"cProductName\":\"" + $("#SelectedcProductName").val() 175 + "\",\"cSpecification\":\"" + $("#SelectedcSpecification").val() + "\",\"cMeasureUnit\":\"" + $("#SelectedcMeasureUnit").val() + "\"}"; 176 window.returnValue = result; 177 window.close(); 178 } 179 </script> 180 </head> 181 <body> 182 <div style="width:100%;"> 183 <div style="width: 100%; background-color:#eef4f5;"> 184 <p style=" text-align:left;"> 185 客户列表 186 <input type="hidden" id="SelectedProductID" /> 187 <input type="hidden" id="SelectedcProductName" /> 188 <input type="hidden" id="SelectedcSpecification" /> 189 <input type="hidden" id="SelectedcMeasureUnit" /> 190 </p> 191 <div style="height: 20px;"> 192 <ul style="list-style: none; padding: 0; margin: 0;"> 193 <li style="float: left;"> 194 <button onclick="DoSelect() "> 195 选择</button> 196 </li> 197 <li style="float: right;"> 198 <button onclick="DoQuery()"> 199 查询</button> 200 <button onclick="DoReset()"> 201 重置</button> 202 </li> 203 </ul> 204 </div> 205 <div> 206 <table style=" width:70%;"> 207 <tr > 208 <td> 209 商品编号 210 </td> 211 <td> 212 <input id="ProductID" type="text" /> 213 </td> 214 <td> 215 商品代号 216 </td> 217 <td> 218 <input id="cProductName" type="text" /> 219 </td> 220 </tr> 221 </table> 222 </div> 223 <br /> 224 </div> 225 226 <div style="width: 100%;"> 227 <div id="datadiv"> 228 <div id="titlediv" style=" text-align:left;" > 229 <table border="1" style=" width:768px;"> 230 <tr> 231 <th width="20%"> 232 商品编号 233 </th> 234 <th width="30%"> 235 商品代号 236 </th> 237 <th width="30%"> 238 规格 239 </th> 240 <th width="20%"> 241 本地计量 242 </th> 243 </tr> 244 </table> 245 </div> 246 <div style="height: 300px; width:100%; overflow: auto;"> 247 <table id="DataTable" width="100%"> 248 249 </table> 250 </div> 251 </div> 252 <DIV> 253 <TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" height=20> 254 <TBODY> 255 <TR> 256 <TD><NOBR>共<B><label id="PageCount">0</label></B>条/<B><label id="PageNum">0</label></B>页 每页 257 <B><label id="PageSize"></label></B>条 第<B><label id="Page">0</label></B>页</NOBR></TD> 258 <TD align=right "> 259 <BUTTON id="FirstPage" onclick="DoPage('First')">首页</BUTTON> <BUTTON id="PrepPage" onclick="DoPage('Prep')">上页</BUTTON> 260 261 <BUTTON id="NextPage" onclick="DoPage('Next')">下页</BUTTON> <BUTTON id="LastPage" onclick="DoPage('Last')">尾页</BUTTON></TD> 262 </TR> 263 </TBODY> 264 </TABLE> 265 </DIV> 266 </div> 267 </div> 268 </body> 269 </html>
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 using System.Data; 8 using System.Web.Services; 9 10 namespace jsnh_dzd.Pop 11 { 12 public partial class ProductSingle : System.Web.UI.Page 13 { 14 protected void Page_Load(object sender, EventArgs e) 15 { 16 17 } 18 [WebMethod] 19 public static string GetData(int Page, int PageSize, string sqlwhere) 20 { 21 DataTable dtCustom; 22 string sql = ""; 23 string sqlCount = @"select count(1) from (select ProductID from BS_Product {0} group by ProductID 24 ) B "; 25 sql = @"SELECT * FROM 26 ( 27 SELECT ROW_NUMBER() over(order by ProductID ) rn, * FROM 28 (select ProductID,MAX(cProductName) cProductName,MAX(cSpecification) cSpecification, 29 MAX(cMeasureUnit) cMeasureUnit from BS_Product {0} group by ProductID 30 ) B 31 ) A where A.rn between {1} and {2} 32 ORDER BY ProductID "; 33 int sNum = PageSize * (Page - 1) + 1; 34 int eNum = PageSize * Page; 35 if (string.IsNullOrEmpty(sqlwhere)) 36 { 37 sql = string.Format(sql, "", sNum, eNum); 38 sqlCount = string.Format(sqlCount,""); 39 } 40 else 41 { 42 sql = string.Format(sql, " where " + sqlwhere, sNum, eNum); 43 sqlCount = string.Format(sqlCount, " where " + sqlwhere); 44 } 45 dtCustom = DbHelperSQL.Query(sql).Tables[0]; 46 List<Product> listC = new List<Product>(); 47 foreach (DataRow dr in dtCustom.Rows) 48 { 49 Product c = new Product(); 50 c.ProductID = dr["ProductID"].ToString(); 51 c.cProductName = dr["cProductName"].ToString(); 52 c.cSpecification = dr["cSpecification"].ToString(); 53 c.cMeasureUnit = dr["cMeasureUnit"].ToString(); 54 listC.Add(c); 55 } 56 string jsonString = JsonHelper.JsonSerializer<List<Product>>(listC); 57 int PageCount = Convert.ToInt32(DbHelperSQL.GetSingle(sqlCount)); 58 string result = "{PageCount:" + PageCount + ",\"QueryData\":" + jsonString + "}"; 59 return result; 60 } 61 } 62 }
以后要封装一下好重用