（1）先建立表，看看表结构
（2）建立存储过程
DataTables是服务器分页，GetWxUsers存储过程使用了4个参数
(1) @start--表示当前第几页，例如第3页，start是从0开始
(2)@limit-页面大小,例如每页10条记录，则limit为10
(3)@key 是查询关键字，
(4)deptid 是额外自定义参数
在SQL里 where下的查询语句是： @key is null or username+displayname+deptname+pinyin like '%'+@key+'%
这里表示：如果未输入关键字则返回所有数据，如果有关键字，则匹配查询 username,displayname,deptname,pinyin
系统把返回的SQL数据存放到一个 #temp 临时表里，
/****** Object: StoredProcedure [dbo].[GetWxUsers] Script Date: 03/15/2018 08:19:39 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE procedure [dbo].[GetWxUsers] ( @key nvarchar(200)=null, @deptid int=null, @start int =null, @limit int =null ) as begin select IDENTITY(int,1,1) as ID, Username, Displayname, Deptname as Title, Deptid, Email, Pinyin into #temp from wx_users where (@key is null or username+displayname+deptname+pinyin like '%'+@key+'%') and (@deptid is null or deptid=@deptid) declare @to as int = @start+@limit select Username, Displayname, Title, Deptid, Email, Pinyin from #temp where ID>@start and ID<=@to order by username asc select count(*) from #temp end GO
在DataTables的demo里，可以看到要求的JSON数据源格式，其中draw是预留给开发者自己使用的，服务器会原样返回。recordsTotal为共计记录数，recordsFiltered为过滤后记录数，两个数字通常一样
因此，在上面存储过程中，也是返回2个结果 select Username, Displayname ... from #temp where ID>@start and ID<=@to order by username asc 返回数据，
而 select count(*) from #temp 返回记录总数
（3）建立json_users.aspx 返回JSON数据
这是一个常规的执行SQL存储过程，返回数据集的过程，不再详细介绍
using Newtonsoft.Json;
using System.Collections.Generic;
protected void Page_Load(object sender, EventArgs e) { string draw = Request["draw"] + ""; string key = Server.UrlDecode(Request["key"]+""); string start = Request["start"]; string limit = Request["limit"]; string deptid = Request["deptid"]+""; SqlParameter sp_key = new SqlParameter("@key",SqlDbType.NVarChar,200); if (key == "") { sp_key.Value = DBNull.Value; } else { sp_key.Value = key; } SqlParameter sp_start = new SqlParameter("@start",start); SqlParameter sp_limit = new SqlParameter("@limit",limit); SqlParameter sp_deptid = new SqlParameter("@deptid", SqlDbType.NVarChar,20); if (deptid == "") { sp_deptid.Value = DBNull.Value; } else { sp_deptid.Value = deptid; } SqlParameter[] p={ sp_key,sp_start,sp_limit,sp_deptid }; SqlCommand cmd = new SqlCommand(); cmd.CommandText = "GetWxUsers"; cmd.Parameters.AddRange(p); cmd.CommandType = CommandType.StoredProcedure; cmd.Connection = new SqlConnection(Helper.GetCon()); DataSet ds = new DataSet(); SqlDataAdapter da = new SqlDataAdapter(); da.SelectCommand = cmd; da.Fill(ds); dynamic newtonresult = new { draw = Convert.ToInt32(draw == "" ? "0" : draw), recordsTotal = ds.Tables[1].Rows[0][0], recordsFiltered = ds.Tables[1].Rows[0][0], data = ds.Tables[0] }; string jsonString = JsonConvert.SerializeObject(newtonresult); System.IO.File.WriteAllText(Server.MapPath("a.txt"), jsonString); Response.Clear(); Response.ContentType = "application/json"; Response.Write(jsonString); }
在上面代码里，使用了 .net4.5.1版的Newtonsoft.Json.dll,其他版本可以到官网下载。使用Newtonsoft,可以直接把DataTables数据转换为JSON格式
手动输入 json_usres.aspx并传递start和limit参数，则可以看到服务器返回的JSON数据：
（4）下面是Datatables的html页面
<table class="table table-hover" style="border-top:solid 1px #eee; " id="tbl_users" >
<thead>
<tr>
<th>登录名</th>
<th>姓名</th>
<th>邮件</th>
<th>职务</th>
</tr>
</thead>
</table>
下面是JS代码，详细要点都在注释里 processing: true 和 serverSide: true ，这个DEMO并没支持排序功能。DATATABLES使用类似的URL进行请求
http://localhost:50465//json_users.aspx?draw=1&start=0&limit=10&columns[0][data]=Name&columns[0][name]=&columns[0][searchable]=true&columns[0][orderable]=true&columns[0][search][value]=&columns[0][search][regex]=false&columns[1][data]=Age&columns[1][name]=&columns[1][searchable]=true&columns[1][orderable]=false&columns[1][search][value]=&columns[1][search][regex]=false&_=1437225574923 详见 https://www.codeproject.com/Tips/1011531/Using-jQuery-DataTables-with-Server-Side-Processin
function InitTable() { var table = $('#tbl_users').DataTable(); //判断table是否是DataTable，因为下面会重建DataTable，所以，如果是，需要先先销毁 if ($.fn.dataTable.isDataTable('#tbl_users')) { table.destroy(); } //自定义文本框，绑定事件 $("#txt_key").keyup(function () { $("#txt_deptid").val(''); table.ajax.reload(); });
//当选中行变色，这个是自定义的，不过在绑定前，先解绑 $('#tbl_users').unbind(); $('#tbl_users').on('click', 'tr', function () { $(this).toggleClass('selected'); }); //提示信息 var lang = { "sProcessing": "处理中...", "sLengthMenu": "每页 _MENU_ 项", "sZeroRecords": "没有匹配结果", "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。", "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页", "sJump": "跳转" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }; //初始化表格 table = $("#tbl_users").dataTable({ language: lang, //提示信息 autoWidth: false, //禁用自动调整列宽 processing: true, //隐藏加载提示,自行处理 serverSide: true, //启用服务器端分页 searching: false, //禁用原生搜索 orderMulti: false, //启用多列排序 "ordering": false,//禁止排序 order: [], //取消默认排序查询,否则复选框一列会出现小箭头 // renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui dom: 'frtip',//lfrtip pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers columnDefs: [{ "targets": 'nosort', //列的样式名 "orderable": false //包含上样式名‘nosort’的禁止排序 }], ajax: function (data, callback, settings) { $.ajax({ type: "GET", url: "json_users.aspx", cache: false, //禁用缓存 data: { key: escape($("#txt_key").val()), deptid: $("#txt_deptid").val(), start: data.start, limit: data.length }, //传入组装的参数 dataType: "json", success: function (result) { callback(result);//调用DataTable的callback返回数据
//在DataTables的官方演示里，返回的JSON是不含列名的，而在Json_users.aspx里使用Newtonsoft.Json是返回列名的，所以后面调用了api()函数
} }); }, //列表表头字段 columns: [ { "data": "Username" }, { "data": "Displayname" }, { "data": "Email" }, { "data": "Title" } ] }).api(); //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象 }
下面是效果
