jQuery Datatables 1.10+ & ASP.NET MVC 5 服务器端集成

• 从 GitHub 下载解决方案

Datatables 是 jQuery JavaScript 库的一个高度灵活的插件。Datatables 为任何 HTML 表格添加了分页、搜索和多列排序等高级交互控件。本文档将介绍如何将 Datables v1.10+（新参数）与 ASP.NET MVC 5 应用程序结合使用。我们将逐步讲解服务器端实现，实现多列服务器端过滤器以及 Datatables 扩展，例如 Scroller。

引言

与早期版本相比，Datatables v1.10+ 在向服务器发出请求时使用一组新的参数。在本文中，我们将使用这些新参数集来实现 Datatables v1.10+ 与 ASP.NET MVC 5 应用程序的服务器端集成。在此演示中，我生成了一个包含 10,000 条记录的示例数据集。您可以 在此处 下载。

我们将关注以下实现：

• 在 Visual Studios 2013 中创建一个带有默认模板的 ASP.NET MVC 5 应用程序
• 导入包含 10,000 条记录的生成数据集
• 使用 Entity Framework 6.x 为导入的数据集创建实体数据模型
• 为演示表格格式化视图
• 用于向服务器发出 AJAX 调用以查询数据的 JavaScript 函数
• 用于接受服务器参数的视图模型类
• 用于接受发送的参数并返回 Json 结果的控制器
• 使用 Datatables 的 Scroller 扩展进行垂直和水平滚动
• 多列服务器端搜索

创建解决方案和数据集

在 Visual Studios 2013 中创建一个新项目，然后选择 ASP.NET Web 应用程序。

选择 MVC 模板，并将身份验证方法更改为 **无身份验证**。

将数据集导入到 App_Data 文件夹下

我们将在 Model 文件夹中添加一个新项，并创建一个 ADO.NET 实体数据模型。

 

上述步骤将在 Models 目录下创建 Customers.edmx 文件。

View

我已简化 _layout.cshtml 文件以使其更简单，并保留了此演示相关的元素。

• _layout.cshtml 摘要

已删除 About.cshtml 和 Contact.cshtml，因为演示应用程序不需要它们。index.cshtml 已编辑，以包含一个 ID 为 'datatab' 的 table 元素。表格标题已从模型 IEnumerable 中定义。

• index.cshtml 摘要

脚本

从 此处 下载 Datatables 包。

我在此演示中使用了 v1.10.7。请确保将以下文件导入到您的脚本（.js）和内容（.css）文件夹中：

• jquery.dataTables.min.js
• dataTables.scroller.min.js
• jquery.dataTables.min.css
• dataTables.scroller.min.css

现在，我们将在 script 文件夹中创建一个 index.js 文件。我们将设置 serverSide 为 true 以进行服务器端调用。将向 Home Controller 的 DataHandler JsonResult 方法发出 AJAX 调用。我们还将配置要显示的列，并设置 Name 列（索引为 0）的升序排序。我已将导入的脚本捆绑在 bundleConfig.cs 文件中。

• index.js 摘要

请确保从包中导入 datatable 的图像。我创建了一个同名的新文件夹。

视图模型类

我使用了 Marien Monnier 演示中的视图模型类。DTParameters 类定义了 Datatables AJAX 请求发送的参数。DTResult 类定义了将返回给视图的结果集。SortBy 是一个用于对数据进行排序的自定义属性。

• DatatablesViewModel.cs 摘要

控制器和多列搜索

HomeController 将有一个返回 Index 视图的 ActionResult。实现服务器端逻辑以向 Datatable 提供数据并应用搜索过滤器至关重要。由于我们将 Ajax URL 声明为 /Home/DataHandler，因此我们将创建一个名为 DataHandler 的 JsonResult 方法。我们将从以下结构开始：

Datatables 发送的参数被封装在 DTParameters 类中。我们首先创建一个 ResultSet 类来封装搜索和排序逻辑。

• ResultSet.cs 摘要

FilterResult 接受三个参数，即 search、dtResult 和 columnFilters。我们将 Datatables 的全局搜索框值传递给 search 参数。DtResult 是未过滤的 数据集。columnFilters 是应用于列特定搜索框的值的 string 列表。让我们暂时回顾一下我们创建的 index.js 文件。

oTable.columns().every(function () {
    var that = this;
    $('input', this.footer()).on('keyup change', function () {
        that
            .search(this.value)
            .draw();
    });
});

上面，我们使用 Datatables 的 columns() 方法为每一列插入一个 textbox，并附加了一个 keyup / change 事件，该事件将输入的搜索文本发送到控制器。该值以定义 Datatables 中所有列的数组形式发送。 阅读有关发送参数的更多信息。

回到 FilterResult，我们使用 LINQ 查询来过滤结果集。全局搜索将根据与任何列文本的匹配来过滤记录。列特定的搜索框将对相应的列应用过滤器。全局搜索和列搜索都可以相应地工作。GetResult 将对过滤后的数据集进行排序，并将其转换为列表。Count 返回过滤后的数据集的数量。现在，我们将修改 DataHandler 方法如下：

• HomeController.cs 摘要

一旦我们在 data 列表中获得了过滤后的 数据集，我们就以 JSON 格式将数据返回给 Datatables。最后，回顾我们的 index.js；我们通过定义一个 scroller 对象来启用 scroller。后者可以直接设置为 true，但我已禁用加载指示器，因为服务器端是通过 processing 属性进行排序的。scrollY 定义了垂直滚动，而 scrollX 设置为 true 以启用水平滚动，因为我们有大量的列。scrollCollapse 允许在显示有限行数时减小表格的高度。更多关于 scrollCollapse 的信息。

"scrollY": 500,
"scrollX": true,
"scrollCollapse": true,
"scroller": {
    loadingIndicator: false
}, 

我注意到 scroller 扩展有时在 Internet Explorer 中工作不佳。如有需要，可以禁用它。完整的可工作解决方案可以 从 GitHub 仓库下载。

该解决方案也可在 echosteg.com 上找到。