1、服务器端把数据转换成json格式,把此类封装好共hander类调用。
View Code
using System; using System.Collections.Generic;
using System.Web; using System.Data; using Newtonsoft.Json; using System.Text; using System.IO;
/// <summary> ///JsonHelper 的摘要说明 /// </summary> public class JsonHelper { public JsonHelper() { // //TODO: 在此处添加构造函数逻辑 // } /// <summary> /// 把表格转换成json数据 /// 通过表格名查找表格数组中的数据 /// </summary> /// <param name="dt">表格</param> /// <param name="dtName">表格名称</param> /// <param name="count"></param> /// <param name="successAll"></param> /// <param name="amount"></param> /// <param name="balance"></param> /// <returns></returns> public static string DataTableToJSON(DataTable dt, string dtName) { StringBuilder sb = new StringBuilder(); StringWriter sw = new StringWriter(sb);
using (JsonWriter jw = new JsonTextWriter(sw)) { JsonSerializer ser = new JsonSerializer(); jw.WriteStartObject(); jw.WritePropertyName(dtName);//表格名 jw.WriteStartArray();//表格数组 try { //通过循环输出表格中数据 foreach (DataRow dr in dt.Rows) { jw.WriteStartObject();
foreach (DataColumn dc in dt.Columns) {
if (dc.ColumnName == "Area_Code") { DataRow dr_areaName = Northwind.GetAreaName(dr[dc].ToString()); if (dr_areaName != null) { jw.WritePropertyName("Area_Name"); ser.Serialize(jw, dr_areaName["Area_Name"].ToString()); } } else { jw.WritePropertyName(dc.ColumnName); ser.Serialize(jw, dr[dc].ToString()); }
}
jw.WriteEndObject();//结束输出 } jw.WriteEndArray();//结束表格输出 jw.WriteEndObject();//结束输出 } catch (Exception ex) { string me = ex.Message; }
sw.Close();//关闭流 jw.Close();//关闭流
}
return sb.ToString(); } /// <summary> /// 把字符窜转换成json数据 /// </summary> /// <param name="var">属性值</param> /// <param name="Name">属性名称</param> /// <returns></returns> public static string ToJSON(string var, string Name) { StringBuilder sb = new StringBuilder(); StringWriter sw=new StringWriter(sb); using(JsonWriter jw = new JsonTextWriter(sw)) { JsonSerializer ser = new JsonSerializer(); jw.WriteStartObject(); jw.WritePropertyName(Name); ser.Serialize(jw,var); jw.WriteEndObject(); sw.Close(); jw.Close(); } return sb.ToString();
} }
2、客户端利用ajax 获取数据
View Code
<script type="text/javascript">
var where = ""; var orderby="";
$().ready(function() { InitData(0, 0);
$("#pageTheme").change(function() { $("#Pagination").attr('class', $(this).val()); });
});
function pageselectCallback(page_id, jq) { InitData(page_id, where); } //pageindx要获取的页 //m_where数据库查询条件 function InitData(pageindx,m_where) { var tbody = ""; var recordcount=0; if (m_where==0) { where = "<%=where%>"; } else { where = m_where; } $.ajax({ type: "POST", //用POST方式传输 dataType: "json", //数据格式:JSON url: 'Handler.ashx', //目标地址 data: "p=" + (pageindx + 1) + "&orderby=" + orderby + where + "&recordcount=<%=pagecount%>&Client_ID=<%=Client_ID%>", beforeSend: function () { $("#divload").show(); $("#Pagination").hide(); }, //发送数据之前,显示“忙碌”图片,隐藏按钮 complete: function () { $("#divload").hide(); $("#Pagination").show(); }, //接收数据完毕,隐藏“忙碌”图片,显示按钮 error: function (XMLHttpRequest, textStatus, errorThrown) { }, success: function (json) { $("#productTable tr:gt(0)").remove();//删除表格原来的数据,保留表格头部信息 var status; var productData = json.Products;//获取表格名,以便根据表格名获取表格中的数据
$.each(productData, function (i, n) { var trs = ""; if (n.Is_Success == "2") { status = "成功"; } else if (n.Is_Success == "1" || n.Is_Success == "0") { status = "处理中"; } else { status = "充值失败"; } //下面把表格中的数据一条条添加到单元格中 trs += "<tr><td>" + (pageindx * 10 + (i + 1)) + "</td><td>" + n.id + "</td><td>" + n.Agent_OrderID + "</td><td>" + n.PhoneNum + "</td><td>" + n.Area_Name + "</td><td>" + n.Amount + "</td><td>" + status + "</td><td>" + n.Amount_Time + "</td></tr>";
tbody += trs;//拼接 });
$("#productTable").append(tbody);//把数据添加到原表格中
$("#productTable tr:gt(0):odd").attr("class", "odd");//设置表格奇数行css $("#productTable tr:gt(0):even").attr("class", "enen");//设置表格偶数行css
$("#productTable tr:gt(0)").hover(function () {//设置鼠标放置到表格行 和 离开表格行的css $(this).addClass('mouseover'); }, function () { $(this).removeClass('mouseover'); }); SQL(recordcount, pageindx);//分页 } });
SQL(0, pageindx); //分页
} //分页插件 function SQL(recordcount, pageindx) { $("#Pagination").pagination(recordcount, { callback: pageselectCallback, prev_text: '« 前页', next_text: '后页 »', items_per_page: 10, num_display_entries: 6, current_page: pageindx, num_edge_entries: 2 }); } </script>
|
请发表评论