本实例引用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' οnclick=article_edit('资讯编辑','article-add.html','" + data + "') href='javascript:;' title='编辑'><i class='Hui-iconfont'>编辑</i></a>" +
" <a style='text-decoration:none' class='btn btn-info' οnclick=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 = 0;//所有的
//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
1 /// <summary>
2 /// JqueryDataTable插件交互的DT格式的数据(DT参数区分大小写)
3 /// </summary>
4 public class TestDataTable
5 {
6 /// <summary>
7 /// 请求次数(前端==》后端)
8 /// </summary>
9 public int draw { get; set; }
10
11 /// <summary>
12 /// 总记录数(前端《==后端)
13 /// </summary>
14 public int recordsTotal { get; set; }
15
16 /// <summary>
17 /// 过滤后的总记录数(前端《==后端)
18 /// </summary>
19 public int recordsFiltered { get; set; }
20
21 /// <summary>
22 /// 记录开始索引(前端==》后端)
23 /// </summary>
24 public int start { get; set; }
25
26 /// <summary>
27 /// PageIndex(前端==》后端)
28 /// </summary>
29 public int pageIndex { get; set; }
30
31 /// <summary>
32 /// PageSize(前端==》后端)
33 /// </summary>
34 public int length { get; set; }
35 public string search { get; set; }
36 /// <summary>
37 /// 集合分页数据(前端《==后端)
38 /// </summary>
39 public System.Collections.IList data { get; set; }
40 }
二、ashx 版
1、前端代码:
其他都一样,js略有不同
1 <%--js脚本--%>
2 <script>
3
4 var myTable;
5 $(function () {
6 myTable = initializeTable();
7
8 $("#search").click(function () {
9 reloadTable();
10 });
11 });
12
13 function initializeTable() {
14
15 var dutyTable = $("#tbTestReport").dataTable({
16 /****************************************表格数据加载****************************************************/
17 "serverSide": true,
18 "ajax": function (data, callback, settings) {
19 //封装请求参数
20 var param = {};
21 param.draw = data.draw;
22 param.length = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
23 param.start = data.start;//开始的记录序号
24 param.pageIndex = (data.start / data.length) + 1;//当前页码
25 param.search = $("#searchStr").val();
26 //ajax请求数据
27 $.ajax({
28 type: "post",
29 url: "/ajaxpage/testdatatablehandler.ashx?cmd=getTestData",
30 //url: "testdatatable.aspx/test",
31 //contentType: "application/json;charset=utf-8",//设置内容类型,即在页面中传递的方式及编码方式
32 cache: false, //禁用缓存
33 data: { "data": JSON.stringify( param)}, //传入组装的参数
34 dataType: "json",
35 success: function (result) {
36 //var result = JSON.parse(resultData.d);
37 //setTimeout仅为测试延迟效果
38 setTimeout(function () {
39 //封装返回数据
40 var returnData = {};
41 returnData.draw = result.draw;//这里直接自行返回了draw计数器,应该由后台返回
42 returnData.recordsTotal = result.recordsTotal;//返回数据全部记录
43 returnData.recordsFiltered = result.recordsFiltered;//后台不实现过滤功能,每次查询均视作全部结果
44 returnData.data = result.data;//返回的数据列表
45
46 //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
47 //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
48 callback(returnData);
49 }, 200);
50 }
51 });
52 },
53
54 "columns": [//列绑定
55 { "序号": "" },
56 { "data": "ApplyNumber" },
57 { "data": "ResourceName" },
58 { "data": "ResourceType" },
59 { "data": "ApprovalStatus" },
60 { "data": "ApplicantName" },
61 { "data": "CreateTime" },
62 { "操作": "" }
63 ],
64 "columnDefs": [//列定义
65 {
66 "targets": [0],
67 "data": "ID",
68 "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
69 //return "<input type='checkbox' value='" + data + "' name='DataID'>";
70 return "";
71 }
72 },
73 {
74 "targets": [6],
75 "data": "CreateTime",
76 "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
77 if (data == null || data.trim() == "") { return ""; }
78 else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); }
79 }
80 },
81 {
82 "targets": [7],
83 "data": "ID",
84 "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
85 return "<a style='text-decoration:none' class='btn btn-info' οnclick=article_edit('资讯编辑','article-add.html','" + data + "') href='javascript:;' title='编辑'><i class='Hui-iconfont'>编辑</i></a>" +
86 " <a style='text-decoration:none' class='btn btn-info' οnclick=article_del(this,'" + data + "') href='javascript:;' title='删除'><i class='Hui-iconfont'>删除</i></a>";
87 }
88 },
89
90 { "orderable": false, "targets": [0, 7] },// 是否排序
91 //{ "visible": false, "targets": [3, 5] }//是否可见
92 ],
93 "rowCallback": function (row, data, displayIndex) {//行定义
94 $(row).attr("class", "text-c");
95
96 },
97 "drawCallback": function (settings, json) { //每次画完后调用
98
99 var startIndex = this.api().context[0]._iDisplayStart;//获取到本页开始的条数
100 this.api().column(0).nodes().each(function (cell, i) {
101 //翻页序号连续
102 cell.innerHTML = startIndex + i + 1;
103 });
104 },
105 /****************************************表格数据加载****************************************************/
106 /****************************************表格样式控制****************************************************/
107 "dom": "t<'dataTables_info'il>p",//表格布局
108 "language": {//语言国际化
109 "lengthMenu": "每页 _MENU_ 条",
110 "zeroRecords": "没有找到记录",
111 "info": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_条",
112 "infoEmpty": "无记录",
113 "paginate":
114 {
115 "first": "首页",
116 "previous": "前一页",
117 "next": "后一页",
118 "last": "末页"
119 }
120 },
121 "pagingType": "full_numbers",//分页格式
122 "processing": true,//等待加载效果
123 "ordering": false,//排序功能
124 /****************************************表格样式控制****************************************************/
125 });
126
127 return dutyTable;
128 }
129 //当你需要多条件查询,你可以调用此方法,动态修改参数传给服务器
130 function reloadTable() {
131 var oSettings = myTable.fnSettings();
132 myTable.fnClearTable(0);
133 myTable.fnDraw();
134 }
135 </script>
2、后台代码:
1 string json = "";
2 HttpContext context;
3 JavaScriptSerializer jss = new JavaScriptSerializer();
4 Dictionary<string, object> dic = new Dictionary<string, object>();
5 public void ProcessRequest(HttpContext context)
6 {
7 this.context = context;
8 context.Response.ContentEncoding = Encoding.GetEncoding("utf-8");//避免出现乱码
9 //接收浏览器 get/post 过来的参数cmd
10 string cmd = context.Request["cmd"].ToString();
11 switch (cmd)
12 {
13 case "getTestData":
14 json = GetUserList();
15 break;
16 }
17 context.Response.Write(json);
18 }
19 /// <summary>
20 /// 获得用户列表
21 /// </summary>
22 /// <param name="index"></param>
23 /// <returns></returns>
24 public string GetUserList()
25 {
26 #region ===代码===
27
28 var dataStr = context.Request["Data"];
29 if(string.IsNullOrEmpty(dataStr))
30 {
31 return "";
32 }
33 TestDataTable myData = Newtonsoft.Json.JsonConvert.DeserializeObject<TestDataTable>(dataStr);
34
35 int totalCount = 0;//所有的
36 //int selCount = 0;//根据条件搜索到的
37
38 System.Linq.Expressions.Expression<Func<ResourceApply, Boolean>> p = a => true;
39 if (!string.IsNullOrEmpty(myData.search))
40 {
41 p = a => a.ResourceName.ToUpper().Contains(myData.search.ToUpper());
42 }
43
44 var list = new ResourceApplyService().GenericService.GetListByPage(myData.length, myData.pageIndex, out totalCount, p, a => a.CreateTime, true).ToList();
45 myData.recordsFiltered = totalCount;
46 myData.recordsTotal = totalCount;
47 myData.data = list;
48
49 JavaScriptSerializer jss = new JavaScriptSerializer();
50 return jss.Serialize(myData);
51 #endregion ===代码===
52
53 }
PS:这句是取当前页,指定length条数的数据,这个取数据自己实现
1 new ResourceApplyService().GenericService.GetListByPage(myData.length, myData.pageIndex, out totalCount, p, a => a.CreateTime, true).ToList();