在现代的网页应用中，单页应用和大量数据处理变得越来越普遍。得益于JQuery和类似的JavaScript库，能够相对容易地开发此类应用。本文将指导如何从零开始，使用JQuery的DataTable插件和ASP.NET通用处理器构建数据网格。后端将使用SQL Server2008。让直接进入主题...
要理解本文，需要对JQuery和Underscore工具库有一定的了解。将处理从服务器来回的JSON数据，因此需要熟悉JSON和通用处理器。工作应用结构可能如下：
将遵循以下步骤来实现目标：
最终客户端UI将如下所示：
页面头部
<!DOCTYPE html>
<html>
<head>
<title>数据网格示例</title>
<link rel="stylesheet" type="text/css" href="path_to_DataTables.css" />
<script src="path_to_jQuery.js"></script>
<script src="path_to_DataTables.js"></script>
<script src="path_to_noty.js"></script>
</head>
<body>
页面主体
<div id="dataGrid"></div>
页面脚本（概述）
$(document).ready(function() {
var table = $('#dataGrid').DataTable({
"ajax": "path_to_YourHandler.ashx",
"columns": [
{ "data": "CustomerID" },
{ "data": "CustomerCNIC" },
{ "data": "CustomerName" },
{ "data": "CustomerAddress" },
{ "data": "OfficeTelephone" },
{ "data": "MobileNumber1" },
{ "data": "Notes" }
]
});
});
关于数据表选项
这些是案例中非常少且常用的数据表选项...
可以通过使用SQL脚本来创建一个简单的表，表将如下所示：
CREATE TABLE [dbo].[hr_Customer](
[CustomerID] [bigint] IDENTITY(1,1) NOT NULL,
[CustomerCNIC] [varchar](15) NULL,
[CustomerName] [varchar](200) NOT NULL,
[CustomerAddress] [varchar](200) NOT NULL,
[OfficeTelephone] [varchar](50) NULL,
[HomeTelephone] [varchar](50) NULL,
[MobileNumber1] [varchar](50) NULL,
[MobileNumber2] [varchar](50) NULL,
[Notes] [varchar](200) NULL,
[IsActive] [bit] NOT NULL,
[EntryDate] [datetime] NOT NULL,
[ClosingDate] [datetime] NULL,
[sysDate] [datetime] NULL,
CONSTRAINT [PK_hr_Customer] PRIMARY KEY CLUSTERED (
[CustomerID] ASC
) WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
DataTable的所有数据请求将由存储过程提供服务。它看起来有点复杂，但别担心，会尽量在处理处理器和前端UI时让它变得简单。
USE [CodeProject_DataTable]
GO
ALTER PROC [dbo].[sp_hr_v1_0_get_Customers]
@currentIndex int,
@pageSize int,
@orderByClause varchar(max) = null,
@search varchar(max) = null,
@totalRecords as int output
AS
SET NOCOUNT ON
DECLARE @startIndex int
DECLARE @endIndex int
SET @startIndex = @currentIndex + 1
SET @endIndex = @startIndex + @pageSize - 1
SELECT @totalRecords = COUNT(*)
FROM hr_Customer c
WHERE c.IsActive = 1
CREATE TABLE #ttt(
RowNumber int,
CustomerID bigint,
CustomerCNIC varchar(15) null,
CustomerName varchar(200) null,
OfficeTelephone varchar(50) null,
CustomerAddress varchar(200),
Notes varchar(200) null
)
IF (@orderByClause IS NULL AND @search IS NULL)
BEGIN
INSERT INTO #ttt(RowNumber, CustomerID, CustomerCNIC, CustomerName, OfficeTelephone, CustomerAddress, Notes)
SELECT ROW_NUMBER() OVER (ORDER BY CustomerID DESC),
CustomerID, CustomerCNIC, CustomerName, OfficeTelephone, CustomerAddress, Notes
FROM hr_Customer c WITH (READCOMMITTED)
WHERE c.IsActive = 1
END
ELSE
BEGIN
DECLARE @searchClause varchar(max) = '1 = 1'
IF (@search IS NOT NULL)
BEGIN
SET @searchClause = '
(lower(CustomerName) like lower(''' + @search + ''') + ''%''
or lower(CustomerAddress) like lower(''' + @search + ''') + ''%'')'
END
DECLARE @query nvarchar(2000) =
'
INSERT INTO #ttt(RowNumber, CustomerID, CustomerCNIC, CustomerName, OfficeTelephone, CustomerAddress, Notes)
SELECT ROW_NUMBER() OVER('
+ @orderByClause
+ ')
,
CustomerID, CustomerCNIC, CustomerName, OfficeTelephone, CustomerAddress, Notes
FROM hr_Customer c WITH(READCOMMITTED)
WHERE c.IsActive = 1
and '
+ @searchClause
PRINT @query
EXEC sp_executesql @query
END
SELECT * FROM #ttt WHERE RowNumber >= @startIndex AND RowNumber <= @endIndex
DROP TABLE #ttt
使用Visual Studio.Net 2014进行开发，可以选择任何.NET IDE 2008或2010以及2012。对于一些初学者，添加了一些快照来展示如何做到这一点：
创建空解决方案
可以创建一个空的Web解决方案，它看起来像这样。
在通用处理器内部
在Visual Studio.Net中，只是使用了默认设置，框架版本为4.5。值得注意的是，将使用一个非常特殊的基于.NET的JSON库，称为Newtonsoft Json库，稍后会解释。Json处理器看起来像这样：
深入分析
让采用分而治之的方法来理解这个处理器内部发生了什么；例如，数据表想要渲染其初始数据，它将从Json处理器查询，总体请求看起来像这样：
Step 1: 当这个请求在服务器上接收到时，自定义处理器将执行相应的逻辑来处理它...
Step 2: GetJsonCustomer将从数据库中获取结果数据，并生成数据表预期格式的json结果...
Step 3: 如果想要根据数据表中选定的列来排序数据，那么这段代码将为做到这一点。更多细节请查看上面提到的请求格式快照。
Step 4: 最后将从数据库中获取数据，并将数据以适当的格式发送回数据表预期的数据。
Step 5: 下面的代码片段将把.Net DataTable转换为适当的插件数据表预期的响应格式。可以看到，将所有数据包装在aaData中，即数据表预期的容器。
正如上面提到的，将使用Newtonsoft.Json库将对象序列化为适当的json字符串，并将从客户端接收到的json请求反序列化为适当的.NET对象。首先，可以在这里查看这个库。它非常容易使用和理解。将把这个库与项目解决方案一起上传，以供快速参考。一旦下载了这个库，其文件夹结构看起来像这样：
一旦下载了适当的程序集，只需要在项目解决方案中添加它的引用，它将看起来像这样：
在解决方案中添加通用处理器非常简单，只需右键单击解决方案资源管理器中的项目，然后选择添加 > 新建项 > 视觉C# > Web > 通用处理器。添加后它将看起来像这样：
<configuration>
<system.web>
<httpHandlers>
<add verb="*" path="path_to_YourHandler.ashx" type="YourNamespace.YourHandler, YourAssembly" />
</httpHandlers>
</system.web>
</configuration>