本实例引用Datatable版本号： 1.10.16
一、传到aspx后台（webmethod）
1、添加js、css引用：
<link href="/Scripts/ThirdLibs/DataTables/jquery.dataTables.min.css" rel="stylesheet" />
<script src="/Scripts/ThirdLibs/DataTables/jquery.dataTables.min.js"></script>
2、前台代码：
<div style="padding: 10px;">
<input type="text" id="nickname" class="form-control" />
<input type="button" value="搜索" id="search" class="btn btn-primary" />
</div> <table id="tbSubscirptionReport" class="table table-hover table-striped table-bordered table-choose single-check">
<thead>
<tr>
<th style="width: 5%">序号</th>
<th style="width: 15%">表单号</th>
<th style="width: 20%">资源名称</th>
<th style="width: 10%">资源类型</th>
<th style="width: 10%">审批状态</th>
<th style="width: 10%">申请人姓名</th>
<th style="width: 15%">申请时间</th>
<th style="width: 15%">操作</th>
</tr>
</thead> </table> <%--js脚本--%>
<script> var myTable;
$(function () {
myTable = initializeTable(); $("#search").click(function () {
reloadTable();
});
}); function initializeTable() { var dutyTable = $("#tbTestReport").dataTable({
/****************************************表格数据加载****************************************************/
"serverSide": true,
"ajax": function (data, callback, settings) {
//封装请求参数
var param = {};
param.draw = data.draw;
param.length = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
param.start = data.start;//开始的记录序号
param.pageIndex = (data.start / data.length) + 1;//当前页码
param.search = $("#searchStr").val();
//ajax请求数据
$.ajax({
type: "post",
//url: "/ajaxpage/testdatatablehandler.ashx?cmd=getTestData",
url: "testdatatable.aspx/test",
contentType: "application/json;charset=utf-8",//设置内容类型，即在页面中传递的方式及编码方式
cache: false, //禁用缓存
data: JSON.stringify({ data: param }), //传入组装的参数
dataType: "json",
success: function (resultData) {
var result = JSON.parse(resultData.d);
//setTimeout仅为测试延迟效果
setTimeout(function () {
//封装返回数据
var returnData = {};
returnData.draw = result.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.recordsTotal;//返回数据全部记录
returnData.recordsFiltered = result.recordsFiltered;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = result.data;//返回的数据列表 //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
callback(returnData);
}, 200);
}
});
}, "columns": [//列绑定
{ "序号": "" },
{ "data": "ApplyNumber" },
{ "data": "ResourceName" },
{ "data": "ResourceType" },
{ "data": "ApprovalStatus" },
{ "data": "ApplicantName" },
{ "data": "CreateTime" },
{ "操作": "" }
],
"columnDefs": [//列定义
{
"targets": [0],
"data": "ID",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
//return "<input type='checkbox' value='" + data + "' name='DataID'>";
return "";
}
},
{
"targets": [6],
"data": "CreateTime",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
if (data == null || data.trim() == "") { return ""; }
else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); }
}
},
{
"targets": [7],
"data": "ID",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
return "<a style='text-decoration:none' class='btn btn-info' onclick=article_edit('资讯编辑','article-add.html','" + data + "') href='javascript:;' title='编辑'><i class='Hui-iconfont'>编辑</i></a>" +
" <a style='text-decoration:none' class='btn btn-info' onclick=article_del(this,'" + data + "') href='javascript:;' title='删除'><i class='Hui-iconfont'>删除</i></a>";
}
}, { "orderable": false, "targets": [0, 7] },// 是否排序
//{ "visible": false, "targets": [3, 5] }//是否可见
],
"rowCallback": function (row, data, displayIndex) {//行定义
$(row).attr("class", "text-c"); },
"drawCallback": function (settings, json) { //每次画完后调用 var startIndex = this.api().context[0]._iDisplayStart;//获取到本页开始的条数
this.api().column(0).nodes().each(function (cell, i) {
//翻页序号连续
cell.innerHTML = startIndex + i + 1;
});
},
/****************************************表格数据加载****************************************************/
/****************************************表格样式控制****************************************************/
"dom": "t<'dataTables_info'il>p",//表格布局
"language": {//语言国际化
"lengthMenu": "每页 _MENU_ 条",
"zeroRecords": "没有找到记录",
"info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条",
"infoEmpty": "无记录",
"paginate":
{
"first": "首页",
"previous": "前一页",
"next": "后一页",
"last": "末页"
}
},
"pagingType": "full_numbers",//分页格式
"processing": true,//等待加载效果
"ordering": false,//排序功能
/****************************************表格样式控制****************************************************/
}); return dutyTable;
}
//当你需要多条件查询，你可以调用此方法，动态修改参数传给服务器
function reloadTable() {
var oSettings = myTable.fnSettings();
myTable.fnClearTable(0);
myTable.fnDraw();
}
</script>
3、后台代码（aspx）
[WebMethod]
public static string Test(TestDataTable data) { #region ===代码===
int totalCount = ;//所有的
//int selCount = 0;//根据条件搜索到的 System.Linq.Expressions.Expression<Func<ResourceApply, Boolean>> p = a => true;
if (!string.IsNullOrEmpty(data.search))
{
p = a => a.ResourceName.ToUpper().Contains(data.search.ToUpper());
} var list = new ResourceApplyService().GenericService.GetListByPage(data.length, data.pageIndex, out totalCount, p, a => a.CreateTime, true).ToList();
data.recordsFiltered = totalCount;
data.recordsTotal = totalCount;
data.data = list; JavaScriptSerializer jss = new JavaScriptSerializer();
return jss.Serialize(data);
#endregion ===代码=== }
4、 Model TestDataTable
/// <summary>
/// JqueryDataTable插件交互的DT格式的数据(DT参数区分大小写)
/// </summary>
public class TestDataTable
{
/// <summary>
/// 请求次数（前端==》后端）
/// </summary>
public int draw { get; set; } /// <summary>
/// 总记录数（前端《==后端）
/// </summary>
public int recordsTotal { get; set; } /// <summary>
/// 过滤后的总记录数（前端《==后端）
/// </summary>
public int recordsFiltered { get; set; } /// <summary>
/// 记录开始索引（前端==》后端）
/// </summary>
public int start { get; set; } /// <summary>
/// PageIndex（前端==》后端）
/// </summary>
public int pageIndex { get; set; } /// <summary>
/// PageSize（前端==》后端）
/// </summary>
public int length { get; set; }
public string search { get; set; }
/// <summary>
/// 集合分页数据（前端《==后端）
/// </summary>
public System.Collections.IList data { get; set; }
}
二、ashx 版
1、前端代码：
其他都一样，js略有不同
<%--js脚本--%>
<script> var myTable;
$(function () {
myTable = initializeTable(); $("#search").click(function () {
reloadTable();
});
}); function initializeTable() { var dutyTable = $("#tbTestReport").dataTable({
/****************************************表格数据加载****************************************************/
"serverSide": true,
"ajax": function (data, callback, settings) {
//封装请求参数
var param = {};
param.draw = data.draw;
param.length = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
param.start = data.start;//开始的记录序号
param.pageIndex = (data.start / data.length) + 1;//当前页码
param.search = $("#searchStr").val();
//ajax请求数据
$.ajax({
type: "post",
url: "/ajaxpage/testdatatablehandler.ashx?cmd=getTestData",
//url: "testdatatable.aspx/test",
//contentType: "application/json;charset=utf-8",//设置内容类型，即在页面中传递的方式及编码方式
cache: false, //禁用缓存
data: { "data": JSON.stringify( param)}, //传入组装的参数
dataType: "json",
success: function (result) {
//var result = JSON.parse(resultData.d);
//setTimeout仅为测试延迟效果
setTimeout(function () {
//封装返回数据
var returnData = {};
returnData.draw = result.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.recordsTotal;//返回数据全部记录
returnData.recordsFiltered = result.recordsFiltered;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = result.data;//返回的数据列表 //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
callback(returnData);
}, 200);
}
});
}, "columns": [//列绑定
{ "序号": "" },
{ "data": "ApplyNumber" },
{ "data": "ResourceName" },
{ "data": "ResourceType" },
{ "data": "ApprovalStatus" },
{ "data": "ApplicantName" },
{ "data": "CreateTime" },
{ "操作": "" }
],
"columnDefs": [//列定义
{
"targets": [0],
"data": "ID",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
//return "<input type='checkbox' value='" + data + "' name='DataID'>";
return "";
}
},
{
"targets": [6],
"data": "CreateTime",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
if (data == null || data.trim() == "") { return ""; }
else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); }
}
},
{
"targets": [7],
"data": "ID",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
return "<a style='text-decoration:none' class='btn btn-info' onclick=article_edit('资讯编辑','article-add.html','" + data + "') href='javascript:;' title='编辑'><i class='Hui-iconfont'>编辑</i></a>" +
" <a style='text-decoration:none' class='btn btn-info' onclick=article_del(this,'" + data + "') href='javascript:;' title='删除'><i class='Hui-iconfont'>删除</i></a>";
}
}, { "orderable": false, "targets": [0, 7] },// 是否排序
//{ "visible": false, "targets": [3, 5] }//是否可见
],
"rowCallback": function (row, data, displayIndex) {//行定义
$(row).attr("class", "text-c"); },
"drawCallback": function (settings, json) { //每次画完后调用 var startIndex = this.api().context[0]._iDisplayStart;//获取到本页开始的条数
this.api().column(0).nodes().each(function (cell, i) {
//翻页序号连续
cell.innerHTML = startIndex + i + 1;
});
},
/****************************************表格数据加载****************************************************/
/****************************************表格样式控制****************************************************/
"dom": "t<'dataTables_info'il>p",//表格布局
"language": {//语言国际化
"lengthMenu": "每页 _MENU_ 条",
"zeroRecords": "没有找到记录",
"info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条",
"infoEmpty": "无记录",
"paginate":
{
"first": "首页",
"previous": "前一页",
"next": "后一页",
"last": "末页"
}
},
"pagingType": "full_numbers",//分页格式
"processing": true,//等待加载效果
"ordering": false,//排序功能
/****************************************表格样式控制****************************************************/
}); return dutyTable;
}
//当你需要多条件查询，你可以调用此方法，动态修改参数传给服务器
function reloadTable() {
var oSettings = myTable.fnSettings();
myTable.fnClearTable(0);
myTable.fnDraw();
}
</script>
2、后台代码：
string json = "";
HttpContext context;
JavaScriptSerializer jss = new JavaScriptSerializer();
Dictionary<string, object> dic = new Dictionary<string, object>();
public void ProcessRequest(HttpContext context)
{
this.context = context;
context.Response.ContentEncoding = Encoding.GetEncoding("utf-8");//避免出现乱码
//接收浏览器 get/post 过来的参数cmd
string cmd = context.Request["cmd"].ToString();
switch (cmd)
{
case "getTestData":
json = GetUserList();
break;
}
context.Response.Write(json);
}
/// <summary>
/// 获得用户列表
/// </summary>
/// <param name="index"></param>
/// <returns></returns>
public string GetUserList()
{
#region ===代码=== var dataStr = context.Request["Data"];
if(string.IsNullOrEmpty(dataStr))
{
return "";
}
TestDataTable myData = Newtonsoft.Json.JsonConvert.DeserializeObject<TestDataTable>(dataStr); int totalCount = ;//所有的
//int selCount = 0;//根据条件搜索到的 System.Linq.Expressions.Expression<Func<ResourceApply, Boolean>> p = a => true;
if (!string.IsNullOrEmpty(myData.search))
{
p = a => a.ResourceName.ToUpper().Contains(myData.search.ToUpper());
} var list = new ResourceApplyService().GenericService.GetListByPage(myData.length, myData.pageIndex, out totalCount, p, a => a.CreateTime, true).ToList();
myData.recordsFiltered = totalCount;
myData.recordsTotal = totalCount;
myData.data = list; JavaScriptSerializer jss = new JavaScriptSerializer();
return jss.Serialize(myData);
#endregion ===代码=== }
PS：这句是取当前页，指定length条数的数据，这个取数据自己实现
new ResourceApplyService().GenericService.GetListByPage(myData.length, myData.pageIndex, out totalCount, p, a => a.CreateTime, true).ToList();