（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 ‘%‘[email protected]+‘%
这里表示：如果未输入关键字则返回所有数据，如果有关键字，则匹配查询 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<[email protected] 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对象
}
下面是效果
原文地址：https://www.cnblogs.com/mqingqing123/p/8571497.html