如何使用 C#、ASP.NET、SQL Server 端处理实现 jQuery DataTables 插件？
Posted
技术标签:
【中文标题】如何使用 C#、ASP.NET、SQL Server 端处理实现 jQuery DataTables 插件？【英文标题】：How can I implement jQuery DataTables plugin using C#, ASP.NET, SQL Server side processing? 【发布时间】：2012-09-17 18:20:48 【问题描述】：如何使用 C#、ASP.NET、带有 ajax 和 web 服务的 SQL Server 端处理来实现 jQuery DataTables 插件？
想用 c# 和 ASP.NET 实现一个 Datatables 网格，但很难找到一个可行的例子。
【问题讨论】：
【参考方案1】：在 C#、ASP.NET、使用 ajax 和 web 服务的 SQL Server 端处理中的 JQuery DataTables 的工作示例。
http://jquerydatatablessamp.codeplex.com/
https://github.com/benni12/jquerydatatablesExample
（发了两次，方便大家找）
从链接到 DataTables.Net 开始，Allan 用这个插件做了一个了不起的工作。
我已经使用这个插件大约一年了。当我第一次尝试在 C# 和 .NET 中使用服务器端处理、ajax 和 web 服务来实现它时，文档很少，也没有工作示例，所以我决定将它们放在一起。
提供的源代码是 Visual Studio 2012（在 Ultimate 2012 和 Pro 2012 中测试）网站项目。我把它作为一个简单的工作示例放在一起，希望能帮助其他人尝试把这样的东西放在一起。这是我希望一年前拥有的东西。
数据库 mdf 包含在 App_Data 文件夹中。我目前正在运行 MS SQL Server Express 2012 的实例。
需要安装 SQL Server Express 2012 或其他标准或更好的 MS SQL Server 完整版安装。在标准 2008 R2 和 2012 Express 上测试。
【讨论】：
在 vs 中用户使用哪个版本？ 这个打不开请提供其他版本，我会用VS2010 Ultimate @user108 好的，2010 版本现在可在 GitHub 和 Codeplex 链接上使用。内置专业版。希望这对你有用。告诉我进展如何。 yes 是打开的，但是当我搜索时给我错误Invalid value for key 'attachdbfilename'.
@user108 好的，经过一番谷歌搜索后，似乎 SQL Server 2010 express 不支持在解决方案中附加数据库（forums.asp.net/t/966680.aspx/1）...但是好消息是，SQL Server 2012 express 可以。这就是我在我的开发机器上运行的，所以如果你能抓住这个，你应该很高兴。 microsoft.com/en-us/download/details.aspx?id=29062【参考方案2】：
此版本适用于旧版本的 SqlServer，对于较新版本，请尝试其他版本。
此技术使用存储过程，您可以使用#temp 以外的其他方法来提高性能 主要特点是
存储过程 免注入且易于适应的 sql 结构 阿贾克斯功能强大且非常有用
第 1 步：(html)
<link href="../Content/css/datatables.min.css" rel="stylesheet" />
<script src="../Scripts/datatables.min.js"></script>
<script src="../Scripts/jQuery-2.1.4.min.js"></script>
<script>
$(document).ready(function ()
if ($.fn.dataTable.isDataTable('#tbl_category'))
t.destroy();
t = $("#tbl_category").DataTable(
processing: true,
serverSide: true,
info: true,
ajax:
url: '../Ajax/Category?option=GetAllAdminCategory&user_srno='+user_srno,
data: function (data)
delete data.columns;
,
columns: [
"data": "abc" ,
"data": "name" ,
"data": "baseDiscount" ,
"data": "additionalDiscount" ,
"data": "specialDiscount" ,
"render": function (data, type, full, meta)
return '<a class="btn btn-warning" onClick="editdata(' + full.srno + ',\'' + full.name + '\',\'' + full.baseDiscount + '\',\'' + full.additionalDiscount + '\',\'' + full.specialDiscount + '\',\'' + full.specialDiscount + '\')" href="javascript://">Edit</a> <a class="btn btn-danger" onClick="deletePhantom(' + full.srno + ',\'DELETE\')" href="javascript://">Remove</a>';
],
order: [[0, 'desc']],
select: true,
dom: 'lfrtip',
responsive: true,
buttons: true
);
t.on('order.dt search.dt', function ()
t.column(0, search: 'applied', order: 'applied' ).nodes().each(function (cell, i)
cell.innerHTML = i + 1;
);
).draw();
);
</script>
<table id="tbl_category" class="display" cellspacing="0" >
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Base Discount</th>
<th>Additional Discount</th>
<th>Special Discount</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>#</th>
<th>Name</th>
<th>Base Discount</th>
<th>Additional Discount</th>
<th>Special Discount</th>
<th>Action</th>
</tr>
</tfoot>
</table>
STEP :2（存储过程）
Create procedure [dbo].[category_post]
@srno int=null, -- from here
@user_srno int=null,
@catSrno int=null,
@name varchar(200)=null,
@baseDiscount numeric(18,2)=null,
@additionalDiscount numeric(18,2)=null,
@specialDiscount numeric(18,2)=null,
@status int null,
@Action_by int null,
@option varchar(20) = null, -- to here personnel parameters
@orderColumn int =null,
@orderDir varchar(20)=null,
@start int =null,
@limit int =null,
@searchKey varchar(20) -- personnel parameter
as
BEGIN
select IDENTITY(int,1,1) as SnoID, null as abc,specialDiscount, additionalDiscount, baseDiscount, name,cast(srno as varchar(20)) as srno
--this method is userful for all sql server version (it can be made better by using fetch)
into #tempCategory
from categoryStd where [status] not in(4,14) and categoryStd.name like '%'+@searchKey+'%'
declare @to as int = @start+@limit
select * from #tempCategory where SnoID>@start and SnoID<=@to
order by
CASE WHEN @orderColumn = 1 AND @orderdir = 'desc' THEN #tempCategory.[name] END DESC,
CASE WHEN @orderColumn = 1 AND @orderdir = 'asc' THEN #tempCategory.[name] END ASC,
CASE WHEN @orderColumn = 2 AND @orderdir = 'desc' THEN #tempCategory.[name] END DESC,
CASE WHEN @orderColumn = 2 AND @orderdir = 'asc' THEN #tempCategory.[name] END ASC
select count(*) from #tempCategory
END
STEP:3（AJAX 页面）C# 表单
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using AppBlock;
using System.Data.SqlClient;
using Newtonsoft.Json;
namespace alfest.Ajax
public partial class Category : System.Web.UI.Page
string mode, option, user, limit, start, searchKey, orderByColumn, orderByDir, estMstSrno, pnlsrno, draw, jsonString;
CommonClass cmnCls = new CommonClass();
protected void Page_Load(object sender, EventArgs e)
mode = Request.QueryString["mode"] == null ? "" : Request.QueryString["mode"].ToString();
option = Request.QueryString["option"] == null ? "" : Request.QueryString["option"].ToString();
limit = Request.QueryString["length"] == null ? "" : Request.QueryString["length"].ToString();
start = Request.QueryString["start"] == null ? "" : Request.QueryString["start"].ToString();
user = Request.QueryString["user"] == null ? "" : Request.QueryString["user"].ToString();
searchKey = Request.QueryString["search[value]"] == null ? "" : Request.QueryString["search[value]"].ToString();
orderByColumn = Request.QueryString["order[0][column]"] == null ? "" : Request.QueryString["order[0][column]"].ToString();
orderByDir = Request.QueryString["order[0][dir]"] == null ? "" : Request.QueryString["order[0][dir]"].ToString();
estMstSrno = Request.QueryString["estMstSrno"] == null ? "" : Request.QueryString["estMstSrno"].ToString();
pnlsrno = Request.QueryString["pnlsrno"] == null ? "" : Request.QueryString["pnlsrno"].ToString();
draw = Request.QueryString["draw"] == null ? "" : Request.QueryString["draw"].ToString();
// Cls_Category CatgObj = new Cls_Category();
// CatgObj.orderColumn = Convert.ToInt32(orderByColumn);
// CatgObj.limit = Convert.ToInt32(limit);
// CatgObj.orderDir = orderByDir;
// CatgObj.start = Convert.ToInt32(start);
// CatgObj.searchKey = searchKey;
// CatgObj.option = "GetAllAdminCategory";
// or user your own method to get data (just fill the dataset)
// DataSet ds = cmnCls.PRC_category(CatgObj);
dynamic newtonresult = new
status = "success",
draw = Convert.ToInt32(draw == "" ? "0" : draw),
recordsTotal = ds.Tables[1].Rows[0][0],
recordsFiltered = ds.Tables[1].Rows[0][0],
data = ds.Tables[0]
;
jsonString = JsonConvert.SerializeObject(newtonresult);
Response.Clear();
Response.ContentType = "application/json";
Response.Write(jsonString);
最终结果：
【讨论】：
我谦虚地请求更多的 cmets 解释代码，如果可能的话.. 如果提供，我很乐意投票 dom:'lfrtip' 是什么意思？ @Malky.Kid 是搜索框、状态、分页按钮，是它的表示和顺序。 好的，但是如果我要求对代码的使用方式进行评论可以吗？我真的很感激【参考方案3】：在 MVC、实体框架、带有最新获取偏移分页的存储过程中的实现
第 1 步 - HTML
<table id="tbl_category" class="display" cellspacing="0" >
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Base Discount</th>
<th>Additional Discount</th>
<th>Special Discount</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>#</th>
<th>Name</th>
<th>Base Discount</th>
<th>Additional Discount</th>
<th>Special Discount</th>
<th>Action</th>
</tr>
</tfoot>
</table>
@*<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.13/r-2.1.1/sc-1.4.2/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.13/r-2.1.1/sc-1.4.2/datatables.min.js"></script>*@
<link href="~/Scripts/JqueryDatatable/Datatable.css" rel="stylesheet" />
<script src="~/Scripts/JqueryDatatable/DataTable.js"></script>
<script>
$(document).ready(function()
if ($.fn.dataTable.isDataTable('#tbl_category'))
t.destroy();
t = $("#tbl_category").DataTable(
processing: true,
serverSide: true,
info: true,
ajax:
url: '../Client/SearchMis',
data: function (data)
delete data.columns;
,
scrollY: 300,
deferRender: true,
scroller: true,
columns: [
"data": "abc" ,
"data": "name" ,
"data": "Address" ,
"data": "name" ,
"data": "name" ,
"render": function (data, type, full, meta)
return '<a class="btn btn-warning" onClick="editdata(' + full.name + ',\'' + full.name + '\',\'' + full.name + '\',\'' + full.name + '\',\'' + full.name + '\',\'' + full.name + '\')" href="javascript://">Edit</a> <a class="btn btn-danger" onClick="deletePhantom(' + full.name + ',\'DELETE\')" href="javascript://">Remove</a>';
],
order: [[0, 'desc']],
select: true,
dom: 'lfrtip',
responsive: true,
buttons: true
);
t.on('order.dt search.dt', function ()
t.column(0, search: 'applied', order: 'applied' ).nodes().each(function (cell, i)
cell.innerHTML = i + 1;
);
).draw();
);
</script>
第 2 步 - C#
using EmployeeTrackingSystemAndMIS.Models;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web.Mvc;
namespace EmployeeTrackingSystemAndMIS.Controllers
public class ClientController : Controller
private EmployeeTrackingSystemAndMISEntities db = new EmployeeTrackingSystemAndMISEntities();
public string SearchMis()
string limit, start, searchKey, orderColumn, orderDir, draw, jsonString;
limit = Request.QueryString["length"] == null ? "" : Request.QueryString["length"].ToString();
start = Request.QueryString["start"] == null ? "" : Request.QueryString["start"].ToString();
searchKey = Request.QueryString["search[value]"] == null ? "" : Request.QueryString["search[value]"].ToString();
orderColumn = Request.QueryString["order[0][column]"] == null ? "" : Request.QueryString["order[0][column]"].ToString();
orderDir = Request.QueryString["order[0][dir]"] == null ? "" : Request.QueryString["order[0][dir]"].ToString();
draw = Request.QueryString["draw"] == null ? "" : Request.QueryString["draw"].ToString();
var parameter = new List<object>();
var param = new SqlParameter("@orderColumn", orderColumn);
parameter.Add(param);
param = new SqlParameter("@limit", limit);
parameter.Add(param);
param = new SqlParameter("@orderDir", orderDir);
parameter.Add(param);
param = new SqlParameter("@start", start);
parameter.Add(param);
param = new SqlParameter("@searchKey", searchKey);
parameter.Add(param);
var CompanySearchList = db.Database.SqlQuery<CompanySearch>("EXEC SearchCompany @orderColumn,@limit,@orderDir,@start,@searchKey ", parameter.ToArray()).ToList();
dynamic newtonresult = new
status = "success",
draw = Convert.ToInt32(draw == "" ? "0" : draw),
recordsTotal = CompanySearchList.FirstOrDefault().TotalCount,
recordsFiltered = CompanySearchList.FirstOrDefault().TotalCount,
data = CompanySearchList
;
jsonString = JsonConvert.SerializeObject(newtonresult);
return jsonString;
private class CompanySearch
public int TotalCount get; set;
public string abc get; set;
public string Address get; set;
public int? ClientID get; set;
public int? EmployeeID get; set;
public string name get; set;
public int CompanyID get; set;
第 3 步 - 存储过程
USE [EmployeeTrackingSystemAndMIS]
GO
/****** Object: StoredProcedure [dbo].[category_post] Script Date: 22-02-2017 10:57:48 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
alter procedure [dbo].SearchCompany
@orderColumn int ,
@limit int,
@orderDir varchar(20),
@start int,
@searchKey varchar(20)
as
BEGIN
declare @to as int = @start+@limit
select TotalCount = COUNT(c.CompanyID) OVER(), null as abc,c.Address,c.ClientID ,c.EmployeeID , name,
c.CompanyID
from CompanyTbl c where c.Name like '%'+@searchKey+'%'
order by
CASE WHEN @orderColumn = 1 AND @orderdir = 'desc' THEN c.[name] END DESC,
CASE WHEN @orderColumn = 1 AND @orderdir = 'asc' THEN c.[name] END ASC,
CASE WHEN @orderColumn = 2 AND @orderdir = 'desc' THEN c.[name] END DESC,
CASE WHEN @orderColumn = 2 AND @orderdir = 'asc' THEN c.[name] END ASC
OFFSET @start ROWS
FETCH NEXT @to ROWS ONLY
End
【讨论】：
我的 Request.QueryString 值总是空的...有什么想法吗？ @Murphybro2 你用的是哪个 .net 版本，是 mvc、asp.net、.net core。以上是关于如何使用 C#、ASP.NET、SQL Server 端处理实现 jQuery DataTables 插件？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 C# 从 ASP.NET 中的 SQL Server 数据库中检索和显示 GridView 中的值
如何更好地在 c# (asp.net) 和 SQL Server 上保存和加载图片？
如何通过 C# ASP.net 从 SQL Server 中的文本框中存储日期