jQuery DataTables 和 ASP.NET MVC 集成 - 第一部分
4.93/5 (191投票s)
代码示例解释了如何将 jQuery DataTables 插件集成到 ASP.NET MVC 应用程序中
目录
引言
jQuery DataTables 插件是一个出色的客户端组件，可用于在 Web 浏览器中创建功能丰富的表格。此插件为网页中放置的普通 HTML 表格添加了许多功能，例如筛选、分页、排序、更改页面长度等。
本文展示了如何将 jQuery DataTables 插件集成到 ASP.NET MVC 应用程序中。它包含分步示例，展示了 DataTables 插件如何与服务器端组件交互。
本文并未涵盖 JQuery DataTables 插件在 ASP.NET MVC 应用程序中的所有可能集成场景。对于其他集成场景，您可能还需要查看本系列中的其他文章
- 第2部分 - 使用 ASP.NET MVC 中的 DataTable 实现 CRUD 功能（添加、内联编辑、删除） - 如何添加数据管理（CRUD）功能，例如添加、删除和编辑行
- 第3部分 - 在 ASP.NET MVC 中重新加载数据表内容 - 如何使用 Ajax 重新加载 DataTable 内容
- 第4部分 - 创建可展开的主从表 - 如何在选中常规行时实现打开详细信息行
- 第5部分 - ASP.NET MVC 中的 jQuery DataTables 高级筛选 - 如何实现高级筛选
- 第6部分 - ASP.NET MVC 中的表格行拖放 - 如何使用拖放行重新排序
此外，如果您想查看 JQuery DataTables 插件的所有可能配置，您可以查看 使用 jQuery DataTables 插件增强 HTML 表格 一文，其中描述了许多有用的配置选项。
背景
目前，有几个组件可以帮助开发人员在网页上创建高效且功能丰富的表格。其中一些是服务器端组件，例如标准的 ASP.NET GridView 或其他类似的组件，它们生成 HTML 代码并附加事件，这些事件将请求回发到服务器，然后用户操作由服务器代码处理并生成新表格。另一组组件，例如 jQuery DataTables、FlexGrid 或 jqGrid，则以客户端代码的形式实现。这些插件以以下图所示的普通 HTML 表格为基础，并添加各种增强功能。
例如，如果您将 JQuery DataTables 插件应用于此普通 HTML 表格，您将获得类似于以下图所示的表格
DataTables 插件在表格上方添加了一个“*显示 XXX 条目*”下拉菜单，使用户可以选择每页显示 10、25、50 或 100 条记录，以及一个搜索文本框，使用户可以按关键字筛选应在表格中显示的记录。此插件还添加了排序功能，使用户可以通过单击列标题对结果进行排序。表格下方有分页功能，使用户可以浏览页面，并且文本会自动显示当前显示的记录。所有这些功能都是默认添加的，您只需要一行代码
$('#myDataTable').dataTable();
假设第一张图中所示的普通表格具有 ID“myDataTable”，此代码将使用 DataTables 插件增强该表格。大多数这些功能可以完全独立于服务器端代码使用，即，Web 服务器可以使用任何服务器端技术（例如 ASP.NET Web Forms、ASP.NET MVC、PHP、Java 等）以标准格式生成普通 HTML 表格。客户端 JavaScript 组件将使用生成的任何内容并添加客户端功能。在这种客户端模式下，DataTables 从 <tbody></tbody> 部分获取所有表格行，并直接在这些元素上执行筛选、分页和排序，就像在内存对象上一样。这是使用 DataTables 最快的方法，但它要求服务器在一次调用中返回所有数据，将所有这些行加载为内存 JavaScript 对象，并在 DOM 中动态渲染它们。这可能会导致服务器调用和客户端内存使用方面的性能问题。但是，这最大限度地减少了发送到服务器的请求数量，因为一旦表格加载，服务器就完全不使用了。
如果您有兴趣在纯客户端模式下使用 JQuery DataTables 插件，那么您无需阅读本文。您所需要做的就是生成一个普通的 HTML 表格并应用插件。您可以使用插件中的各种配置选项，因此如果您对这种模式感兴趣，您可以阅读以下文章“使用 jQuery DataTables 插件增强 HTML 表格”，其中我解释了 DataTables 插件的各种配置选项。
本文的主题是在服务器端处理模式下使用 JQuery DataTables 插件。
DataTables 服务器端处理模式
可以通过配置 DataTables 通过 AJAX 调用查询服务器以获取所需数据来实施客户端-服务器交互。在这种情况下，在客户端生成的表格最初是空的，如以下示例所示
<table id="myDataTable" class="display">
<thead>
<tr>
<th>ID</th>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
正如您可能注意到的，这个“table”中没有任何行。为了将插件应用于这个“table”，您需要调用类似以下代码的代码
$('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "server_processing.php"
});
在此代码中，通过将 bServerSide 参数设置为 true 来使用服务器端处理模式。在这种模式下，DataTables 插件将使用 Ajax 请求从远程 URL 加载表格数据。第二个参数定义 DataTables 插件应将 Ajax 请求发送到哪个 URL 以将数据加载到表格中。
一旦插件应用于此类表，它将调用服务器端页面（上例中的 *server_processing.php*），发布有关所需数据的信息，从服务器获取响应，并动态加载表数据。服务器响应被格式化为 JSON 对象，在客户端解析，并在表体中显示。下图显示了发送到服务器的调用跟踪（使用 Firefox 的 Firebug 插件捕获）。
在这种情况下，每个事件（更改每页应显示的项目数量、在搜索过滤器中输入关键字、排序、按下分页按钮等）都会触发 DataTables 插件向服务器页面发送有关当前页面、搜索过滤器和排序列的信息。如第三个请求所示，服务器页面返回 JSON 作为结果，DataTables 在显示当前表格页面时使用该数据数组。在这种模式下，不是一次性获取完整页面，而是每当需要新信息时发送几个较小的请求，并且从服务器返回最少量的数据。在此示例中，DataTables 调用 *server_processing.php* 页面并发送有关用户操作的信息。jQuery DataTables 插件的服务器端配置的乏味示例可以在此处找到。服务器端模式的一个主要问题是服务器端逻辑的实现，该逻辑接受来自客户端组件的参数，执行操作并按预期返回数据。本文解释了如何配置 jQuery DataTables 并使用 ASP.NET MVC 控制器实现服务器端逻辑。
使用代码
您需要做的第一件事是创建一个标准的 ASP.NET 模型-视图-控制器结构。此设置需要三个步骤
- 创建表示将要显示的数据结构的模型类
- 创建将对用户事件做出反应的控制器类
- 创建将渲染数据并创建发送到浏览器窗口的 HTML 代码的视图
一个简单的应用程序将公司信息保存在表格中并显示出来，将作为示例使用。此简单表格将通过 jQuery DataTables 插件进行增强，并配置为从服务器端获取所有必要数据。需要下载以下 JavaScript 组件
- jQuery 库，其中包含 DataTables 插件使用的标准类
- jQuery DataTables 插件，包括用于在页面上应用默认样式的可选 DataTables CSS 样式表
这些文件应存储在本地文件系统中，并包含在客户端呈现的 HTML 页面中。这些文件的使用示例将在下面解释。
模型
该模型是一个包含公司数据的简单类。我们需要字段是公司 ID、名称、地址和城镇。公司模型类的源代码如下所示
public class Company
{
public int ID { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string Town { get; set; }
}
视图
由于数据展示是在客户端完成的，因此经典的视图页面非常简单。它包含一个简单的 HTML 表格，并用 jQuery DataTables 插件“装饰”。例如
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery DataTables/ASP.NET MVC Integration</title>
<link href="~/Content/dataTables/demo_table.css"
rel="stylesheet" type="text/css" />
<script src="~/Scripts/jQuery-1.4.4.min.js"
type="text/javascript"></script>
<script src="~/Scripts/jQuery.dataTables.min.js"
type="text/javascript"></script>
<script src="~/Scripts/index.js"
type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="demo">
<h2>Index</h2>
<table id="myDataTable" class="display">
<thead>
<tr>
<th>ID</th>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
使用的视图引擎是 Razor，但也可以使用任何其他视图引擎，因为引擎特定的代码只在页面顶部设置布局页面。该页面包含所有必要的 JavaScript 库并呈现一个空表格。应显示的数据未在服务器端绑定。因此，不需要表格主体，因为数据将从服务器中拉取。在客户端模式下，<tbody></tbody> 部分将包含应在页面上显示的行。但是，在服务器端模式下，数据通过 AJAX 调用动态获取。由于所有处理和显示都在浏览器端的客户端完成，因此服务器端模板引擎的使用是无关紧要的。然而，在实际情况中，如果我们需要在服务器端绑定一些动态数据，我们可以使用任何 MVC 模板引擎，例如 ASPX、Razor、Spark 或 NHaml。视图包含初始化表格所需的标准 jQuery 和 DataTables 库，以及可以替换为任何自定义样式表的标准 DataTables CSS 文件。初始化 DataTables 插件的代码应放在包含的 *index.js* 文件中，如下所示
$(document).ready(function () {
$('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "Home/AjaxHandler",
"bProcessing": true,
"aoColumns": [
{ "sName": "ID",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
return '<a href=\"Details/' +
oObj.aData[0] + '\">View</a>';
}
},
{ "sName": "COMPANY_NAME" },
{ "sName": "ADDRESS" },
{ "sName": "TOWN" }
]
});
});
初始化代码放在标准的 jQuery document ready 包装器中。它找到 ID 为 myDataTable 的表格，然后神奇的事情就开始了。通过将 bServerSide 参数设置为 true，DataTables 被初始化为与服务器端页面一起工作。另一个参数 sAjaxSource 应指向将为客户端表格提供数据的任意 URL（在本例中为“*Home/AjaxHandler*”）。参数 bProcessing 告诉 DataTables 在从服务器获取数据时显示“处理中...”消息，而 aoColumns 定义了表格列的属性（例如，它们是否可用于排序或筛选，是否应在渲染每个单元格时应用一些自定义函数等——有关 DataTables 属性的更多信息可以在 DataTables 网站上找到），并且它与 DataTables 的客户端-服务器设置没有直接关系。
控制器
由于没有服务器端处理，控制器类也相当简单，实际上什么都不做。示例中使用的控制器类如下所示
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
如代码片段所示，控制器只是等待有人调用“Home/Index”URL，并将请求转发到 Index 视图。所有数据处理都在 *Home/AjaxHandler* 控制器操作中完成。
服务器端服务的实现
一旦表格初始化完毕，就需要实现服务器端逻辑来为 DataTables 提供数据。每次需要显示数据时，都将调用服务器端服务（由 jQuery DataTables）。由于 DataTables 配置声明“*Home/AjaxHandler*”为应用于为 DataTable 提供数据的 URL，我们需要在 Home 控制器中实现一个 AjaxHandler 操作，该操作将对 *Home/AjaxHandler* 调用作出反应。例如
public class HomeController : Controller
{
public ActionResult AjaxHandler(jQueryDataTableParamModel param)
{
return Json(new{
sEcho = param.sEcho,
iTotalRecords = 97,
iTotalDisplayRecords = 3,
aaData = new List<string[]>() {
new string[] {"1", "Microsoft", "Redmond", "USA"},
new string[] {"2", "Google", "Mountain View", "USA"},
new string[] {"3", "Gowi", "Pancevo", "Serbia"}
}
},
JsonRequestBehavior.AllowGet);
}
}
该 Action 方法返回一个模拟 DataTables 插件预期信息的 3x4 虚拟数组，即包含总记录数、应显示的记录数以及表示表格单元格的二维矩阵的 JSON 数据。例如
{ "sEcho":"1",
"iTotalRecords":97,
"iTotalDisplayRecords":3,
"aaData":[ ["1","Microsoft","Redmond","USA"],
["2","Google","Mountain View","USA"],
["3","Gowi","Pancevo","Serbia"]
]
}
服务器返回给 DataTables 插件的值是
sEcho- DataTables 用于同步目的的整数值。每次发送到服务器端页面的调用中，DataTables 插件都会在sEcho参数中发送序列号。响应中必须返回相同的值，因为 DataTables 使用它进行同步和匹配请求和响应。iTotalRecords- 表示服务器端存在的总未过滤记录数的整数值，如果没有应用过滤器，这些记录可能会被显示。此值仅用于显示目的；当用户在搜索文本框中输入某个关键字时，DataTables 会显示“*显示 1 到 10 条，共 23 条记录（从 51 条总记录中筛选）*”消息。在这种情况下，响应中返回的iTotalRecords值等于 51。iTotalDisplayedRecords- 表示符合当前过滤条件的记录数的整数值。如果用户在搜索文本框中没有输入任何值，则此值应与iTotalRecords值相同。DataTables 插件使用此值来确定生成分页所需的页数 - 如果此值小于或等于当前页大小，则分页按钮将被禁用。当用户在搜索文本框中输入某个关键字时，DataTables 会显示“*显示 1 到 10 条，共 23 条记录（从 51 条总记录中筛选）*”消息。在这种情况下，响应中返回的iTotalDisplayedRecords值等于 23。aaData- 一个二维数组，表示将显示在表格中的单元格值。当 DataTables 接收到数据时，它将使用aaData数组中的值填充表格单元格。二维数组中的列数必须与 HTML 表格中的列数（即使是隐藏的列）匹配，行数应等于当前页面上可以显示的项数（例如，10、25、50 或 100 - 此值在“*显示 XXX 条目*”下拉菜单中选择）。
一旦 DataTables 初始化，它将使用各种参数调用 *Home/AjaxHandler* URL。这些参数可以放在方法签名中，以便 MVC 可以直接映射它们，或者通过 Request 对象（如标准 ASP.NET 中）访问，但在此示例中，它们被封装在下面给出的 JQueryDataTableParamModel 类中。
/// <summary>
/// Class that encapsulates most common parameters sent by DataTables plugin
/// </summary>
public class jQueryDataTableParamModel
{
/// <summary>
/// Request sequence number sent by DataTable,
/// same value must be returned in response
/// </summary>
public string sEcho{ get; set; }
/// <summary>
/// Text used for filtering
/// </summary>
public string sSearch{ get; set; }
/// <summary>
/// Number of records that should be shown in table
/// </summary>
public int iDisplayLength{ get; set; }
/// <summary>
/// First record that should be shown(used for paging)
/// </summary>
public int iDisplayStart{ get; set; }
/// <summary>
/// Number of columns in table
/// </summary>
public int iColumns{ get; set; }
/// <summary>
/// Number of columns that are used in sorting
/// </summary>
public int iSortingCols{ get; set; }
/// <summary>
/// Comma separated list of column names
/// </summary>
public string sColumns{ get; set; }
}
DataTables 插件可能会发送一些额外的参数，但对于大多数用途而言，提到的参数应该足够了。
将数据加载到表中
本文中显示的服务器端处理实现的第一个示例是对初始调用的响应。初始化后，DataTables 立即向 sAjaxSource URL 发送第一个调用，并显示该页面返回的 JSON 数据。返回初始表格填充所需数据的方法实现如下所示
public ActionResult AjaxHandler(jQueryDataTableParamModel param)
{
var allCompanies = DataRepository.GetCompanies();
var result = from c in allCompanies
select new[] { c.Name, c.Address, c.Town };
return Json(new { sEcho = param.sEcho,
iTotalRecords = allCompanies.Count(),
iTotalDisplayRecords = allCompanies.Count(),
aaData = result
},
JsonRequestBehavior.AllowGet);
}
所有公司的列表都从存储库中获取；它们被格式化为包含应在表格中显示的单元格的二维矩阵，并作为 JSON 对象发送。参数 iTotalRecords 和 iTotalDisplayRecords 等于列表中的公司数量，因为这是应显示的记录数和数据集中记录总数。从请求对象中使用的唯一参数是 sEcho，它只是返回给 DataTables。尽管此服务器操作足以显示初始数据，但它不处理其他数据表操作，例如筛选、排序和分页。
筛选记录
DataTables 插件在表格中添加了一个文本框，用户可以通过输入关键字来筛选表格中显示的结果。用于筛选的文本框如下图所示
在服务器端处理模式下，每当用户在文本框中输入一些文本时，DataTables 都会向服务器端发送新的 AJAX 请求，期望只返回与过滤器匹配的条目。DataTables 插件会在 sSearch HTTP 请求参数中发送在过滤器文本框中输入的值。为了处理用户的过滤请求，AjaxHandler 必须稍作修改，如以下列表所示
public ActionResult AjaxHandler(jQueryDataTableParamModel param)
{
var allCompanies = DataRepository.GetCompanies();
IEnumerable<Company> filteredCompanies;
if (!string.IsNullOrEmpty(param.sSearch))
{
filteredCompanies = DataRepository.GetCompanies()
.Where(c => c.Name.Contains(param.sSearch)
||
c.Address.Contains(param.sSearch)
||
c.Town.Contains(param.sSearch));
}
else
{
filteredCompanies = allCompanies;
}
var displayedCompanies = filteredCompanies;
var result = from c in displayedCompanies
select new[] { Convert.ToString(c.ID), c.Name, c.Address, c.Town };
return Json(new{ sEcho = param.sEcho,
iTotalRecords = allCompanies.Count(),
iTotalDisplayRecords = filteredCompanies.Count(),
aaData = result},
JsonRequestBehavior.AllowGet);
在给定示例中，我们使用 LINQ 查询通过 param.sSearch 值过滤公司列表。DataTables 插件在 sSearch 参数中发送在文本框中输入的关键字。过滤后的公司以 JSON 结果的形式返回。所有记录的数量和应显示的记录数量也一并返回。
多列筛选
DataTables 可以使用基于多列的过滤器，而不是应用于整个表的单个过滤器。设置多列过滤器的详细说明可以在 DataTables 站点上找到（多重过滤 示例）。当使用多列过滤时，在表格的页脚会添加单独的文本框，用于过滤每个单独的列，如下图所示
在多列筛选配置中，DataTables 会将单独的列筛选器发送到服务器端，作为请求参数 sSearch_0、sSearch_1 等。请求变量的数量等于 iColumns 变量。此外，您可以使用列的特定值，而不是 param.sSearch 值，如示例所示
//Used if particular columns are separately filtered
var nameFilter = Convert.ToString(Request["sSearch_1"]);
var addressFilter = Convert.ToString(Request["sSearch_2"]);
var townFilter = Convert.ToString(Request["sSearch_3"]);
DataTables 初始化设置可以指定列是否可搜索（上一个示例中 ID 列不可搜索）。DataTables 还会向服务器端页面发送附加参数，以便服务器端组件可以确定哪些字段是完全可搜索的。在本文使用的配置中，DataTables 将单独的列过滤器作为请求参数（bSearchable_0、bSearchable_1 等）发送到服务器。请求变量的数量等于 iColumns 变量。
//Optionally check whether the columns are searchable at all
var isIDSearchable = Convert.ToBoolean(Request["bSearchable_0"]);
var isNameSearchable = Convert.ToBoolean(Request["bSearchable_1"]);
var isAddressSearchable = Convert.ToBoolean(Request["bSearchable_2"]);
var isTownSearchable = Convert.ToBoolean(Request["bSearchable_3"]);
本文使用的示例配置将 isIDSearchable 变量设置为 false，而其他变量设置为 true。发送到服务器的值取决于数据库初始化函数中的 aoColumns 设置。服务器端过滤的问题可能是发送到服务器的 AJAX 请求数量巨大。DataTables 插件在用户每次更改搜索关键字（例如，输入或删除任何字符）时都会向服务器发送新的 AJAX 请求。这可能是一个问题，因为服务器需要处理更多的请求，尽管其中只有一部分会被实际使用。因此，最好实现一些延迟函数，以便请求仅在延迟一段时间后才发送（DataTables 网站上有一个 fnSetFilteringDelay 函数的示例）。
分页
DataTables 插件添加的另一个功能是对显示记录执行分页的能力。DataTables 可以添加“上一页-下一页”按钮或标准分页数字。它还可以通过下拉菜单更改每页显示的记录数。下拉菜单和分页链接如下图所示
在服务器端模式下，每当用户点击分页链接时，DataTables 插件都会将当前页面和页面大小的信息发送到应处理请求的服务器端 URL。处理分页的 AjaxHandler 方法应进行修改以使用请求中发送的信息，如示例所示
public ActionResult AjaxHandler(jQueryDataTableParamModel param)
{
var allCompanies = DataRepository.GetCompanies();
IEnumerable<Company> filteredCompanies = allCompanies;
var displayedCompanies = filteredCompanies
.Skip(param.iDisplayStart)
.Take(param.iDisplayLength);
var result = from c in displayedCompanies
select new[] { Convert.ToString(c.ID), c.Name,
c.Address, c.Town };
return Json(new{ sEcho = param.sEcho,
iTotalRecords = allCompanies.Count(),
iTotalDisplayRecords = filteredCompanies.Count(),
aaData = result},
JsonRequestBehavior.AllowGet);
}
这个例子与上一个例子类似，但这里我们使用了 param.iDisplayStart 和 param.IDisplayLength 参数。这些是表示应显示记录的起始索引和应返回结果数量的整数值。
排序
本文将解释的最后一个功能是按列排序结果。DataTables 插件在 HTML 列中添加了事件处理程序，因此用户可以按任何列排序结果。DataTables 也支持多列排序，用户可以通过按住 SHIFT 键并单击列来按多列排序结果。DataTables 将事件处理程序添加到带有方向箭头的列标题单元格中，如下图所示
每次用户点击列时，DataTables 插件都会发送有关列和排序方向（升序或降序）的信息。为了实现排序，AjaxHandler 应该修改为使用有关应用于排序的列的信息，如示例所示
public ActionResult AjaxHandler(jQueryDataTableParamModel param)
{
var allCompanies = DataRepository.GetCompanies();
IEnumerable<Company> filteredCompanies = allCompanies;
var sortColumnIndex = Convert.ToInt32(Request["iSortCol_0"]);
Func<Company, string> orderingFunction = (c => sortColumnIndex == 1 ? c.Name :
sortColumnIndex == 2 ? c.Address :
c.Town);
var sortDirection = Request["sSortDir_0"]; // asc or desc
if (sortDirection == "asc")
filteredCompanies = filteredCompanies.OrderBy(orderingFunction);
else
filteredCompanies = filteredCompanies.OrderByDescending(orderingFunction);
var displayedCompanies = filteredCompanies;
var result = from c in displayedCompanies
select new[] { Convert.ToString(c.ID), c.Name, c.Address, c.Town };
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = allCompanies.Count(),
iTotalDisplayRecords = filteredCompanies.Count(),
aaData = result
},
JsonRequestBehavior.AllowGet);
这里假设服务器端知道哪些字段是可排序的。但是，如果此信息未知或可以动态配置，DataTables 会在每个请求中发送所有必要信息。可排序的列会以名为 bSortable_0、bSortable_1、bSortable_2 等的请求参数数组形式发送。参数的数量等于可用于排序的列数，该数量也会在 iSortingCols 参数中发送。在这种情况下，名称、地址和城镇可能在客户端可排序，因此以下代码确定它们是否实际可排序
var isNameSortable = Convert.ToBoolean(Request["bSortable_1"]);
var isAddressSortable = Convert.ToBoolean(Request["bSortable_2"]);
var isTownSortable = Convert.ToBoolean(Request["bSortable_3"]);
这些变量可以添加到排序函数的条件中，从而创建可配置的排序功能。
多列排序
DataTables 插件默认启用多列排序。如果您按住 SHIFT 键并点击多个标题列单元格，表格将按第一列排序，然后按第二列排序，依此类推。下图显示了表格中的行如何同时按前三列排序。
这在客户端模式下是直接实现的；然而，在服务器端处理模式下，您需要在控制器中实现逻辑，以便按多列对记录进行排序。
当选择多列进行排序时，对于每个应排序的列，DataTables 会在 Ajax 请求中发送 iSortCol_0、sSortDir_0、iSortCol_1、sSortDir_1、iSortCol_2 和 sSortDir_2 对，其中每对包含应排序列的位置和排序方向。在前面的代码示例中，我只使用了 iSortCol_0 和 sSortDir_0，因为我假设只使用单列排序。
多列排序代码与上一个示例中所示的代码类似，但您需要为每列放置多个排序函数，并应用 OrderBy().ThenBy().ThenBy() 函数链。由于此代码的特殊性和复杂性，我在此处未实现它。请注意，如果这是一个要求，一个更简单的解决方案是使用动态生成的 SQL 查询，您可以在“ORDER BY”子句中连接这些列和排序方向。Linq 在表示和维护方面非常出色且代码简洁；但是，在某些需要过多自定义的情况下，您需要使用更低层的功能。
总结
本文提供了一个将 jQuery DataTables 插件集成到服务器端代码中的分步指南。它展示了如何配置默认情况下与客户端数据一起工作的标准 DataTables 插件，使其通过 AJAX 调用从服务器获取所有必要数据。本示例中使用的服务器端代码是对对象内存集合执行的纯 LINQ 查询集。然而，在实际应用程序中，我们应该使用一些数据访问组件，例如 Linq2Sql、Entity Framework、存储过程、WCF 服务或任何其他获取数据并执行排序、分页和筛选的代码。由于这些数据访问示例超出了本文的范围，因此它们未在示例中使用。
包含本文中描述的所有功能的完整控制器操作示例可以从上面的链接下载。这是一个使用 Visual Web Developer 2010 创建的项目，您需要安装带有 Razor 的 ASP.NET MVC。如果您不使用 Razor，这不是一个大问题 - 我建议您将一些文件（控制器、模型、JavaScript）复制到您的项目中，并根据需要进行修改。
本文只是关于在 ASP.NET 应用程序中使用 JQuery DataTables 插件系列的第一部分。本系列的其他部分是
- 第2部分 - 在 ASP.NET MVC 中实现可编辑的 DataTable - 如何添加数据管理（CRUD）功能，例如添加、删除和编辑行
- 第3部分 - 在 ASP.NET MVC 中重新加载数据表内容 - 如何使用 Ajax 重新加载 DataTable 内容
- 第4部分 - 创建可展开的主从表 - 如何在选中常规行时实现打开详细信息行
- 第5部分 - ASP.NET MVC 中的 jQuery DataTables 高级筛选 - 如何实现高级筛选
- 第6部分 - ASP.NET MVC 中的表格行拖放 - 如何使用拖放行重新排序
您可能还对其他几篇文章感兴趣
- 使用 jQuery DataTables 插件增强 HTML 表格，其中我解释了 DataTables 插件的各种配置选项，
- Java Web 应用程序中的 JQuery Data Tables - 类似本文的文章，展示了在 Java 中的实现。
我希望这一系列文章能帮助您轻松实现更好的用户界面。
历史
- 2011年2月9日：初始版本