1、服务器端把数据转换成json格式,把此类封装好共hander类调用。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 获取数据
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>