ASPDotNet 七、在 Bootstrap 4 中使用 jQuery 数据表插件

七、在 Bootstrap 4 中使用 jQuery 数据表插件

jQuery DataTables插件允许开发人员向任何 HTML 表格添加创新的交互控件。

它支持多种选项和广泛的扩展。ASP.NET MVC 开发人员也能够在他们自己的项目中包含这个插件。这一章的目的不仅仅是向你展示如何使用DataTables插件，也是为了说明你如何使用几乎任何带有 ASP.NET MVC 的开源 JavaScript 和 CSS 插件或框架。

在本章中，我们将涵盖以下主题:

jQuery 概述DataTables
如何在你的 ASP.NET MVC 项目中包含 jQuery DataTables
更改 jQuery DataTables以支持 Bootstrap 4
用 jQuery DataTables和 ASP.NET 加载和显示数据
使用DataTables插件和扩展

jQuery 约会对象

DataTables 是 jQuery JavaScript 库的一个免费开源插件，由一家名为 SpryMedia Ltd .的公司设计和创建。这个插件使得向任何标准 HTML 表添加排序、过滤、分页和搜索等功能变得非常容易实现。

它还提供了各种扩展，支持类似 Excel 的功能、内联编辑和固定列等。数据表网站提供了大量的例子、博客和论坛，你可以在www.datatables.net上找到。

jQuery DataTables 插件可以通过多种方式添加到您的 ASP.NET MVC 项目中，包括 NPM、鲍尔或 DataTables 内容交付网络 ( CDN )。

向您的 ASP.NET MVC 项目添加数据表

要添加数据表插件的基本功能，需要以下两个文件:

第一个是jquery.dataTables.css，它包含了表格的默认 CSS 样式
第二个是jquery.dataTables.js，它包含用于渲染DataTables插件和添加必要功能的 JavaScript 逻辑

这两个文件都可以通过以下链接在数据表 CDN 中找到:

使用数据表鲍尔包

您还可以使用 Bower 添加 jQuery DataTables所需的所有 CSS 和 JavaScript 文件，以及扩展所需的所有 CSS 和 JavaScript 文件。使用 Bower 时，完成以下步骤添加 jQuery DataTables:

在 Visual Studio 中，打开bower.json文件。如果在 Visual Studio 解决方案资源管理器中没有看到bower.json文件，请单击显示所有文件按钮。
将以下两个包添加到文件内部的依赖列表中:

```cs "datatables.net": "1.10.12", "datatables.net-dt": "1.10.12"

```
datatables.net包会将 jQuery DataTables 包添加到项目的wwwroot\lib文件夹中，datatables.net-dt包会为 jQuery DataTables添加基础样式。
datatables.net包包含 JavaScript 文件，datatables.net-dt包将包含jQuery DataTables的 CSS/样式表。

使用 CDN

您可以从上述位置保存文件，将它们添加到项目中，或者添加对 CDN 上托管的文件的引用。后一种选择是首选方法，将有助于提高您的网站的性能。

要从 CDN 引用它，请完成以下步骤:

在 Visual Studio 中，打开本书附带的示例项目，打开位于Views\Shared文件夹内的_Layout.cshtml文件。
在_Layout.cshtml文件的<head>元素中，通过插入以下标记行来添加对 jQuery DataTables 样式表的引用:

```cs

```
打开需要DataTables功能的视图，通过在视图底部添加以下代码来添加对 JavaScript 库的引用:

```cs @section scripts{ }

```

向数据表添加 Bootstrap 数据库样式

前面提到的步骤将向视图和布局文件中添加最少的必需文件，以便为 jQuery DataTables生成基本的样式和功能。然而，默认的DataTables CSS 样式在 Bootstrap 网站中看起来有些不合适。

幸运的是，数据表项目背后的团队创建了一个特定于 Bootstrap 的 CSS 样式和 JavaScript 库，以匹配您的站点的外观。这两个文件也可以在数据表 CDN 上获得:

这两个文件的添加方式与普通DataTables CSS 和 JavaScript 文件相同。请记住，当在视图中包含特定于 Bootstrap 的DataTables JavaScript 文件时，您需要同时包含对默认DataTables JavaScript 文件和特定于 Bootstrap 的文件的引用，如以下标记所示:

@section scripts{ 
    <script type="text/javascript" language="javascript" 
      src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
     </script> 
    <script type="text/javascript" language="javascript" 
     src="//cdn.datatables.net/1.10.12/js/dataTables.bootstrap4.min.js">
    </script> 
   }

在 jQuery 数据表中加载和显示数据

为了实现 jQuery DataTables插件，您首先需要创建一个新的视图，在一个 HTML 表中列出数据。在本例中，您将创建一个显示客户列表的视图。该列表可以从任何数据源读取，例如 SQL Server 数据库。在本例中，将使用一个简单的列表对象。

为此，请完成以下步骤:

在 Visual Studio 中，将名为CustomerController.cs的新控制器类添加到Controllers文件夹中。
将名为Models的新文件夹添加到项目的根目录，并向其中添加名为Customer.cs的新类。
Customer类将用于检索样本客户记录列表。该类的代码如下:

```cs public class Customer { public string CustomerCode { get; set; } public string CompanyName { get; set; } public string ContactName { get; set; } public string ContactTitle { get; set; } public string Address { get; set; } public string City { get; set; } public DateTime CreatedDate { get; set; } }

```
接下来，打开CustomerController类，添加一个名为GetCustomers的新方法。有关GetCustomers方法的完整列表，请参考本章随附的示例项目。这个方法将简单地返回一个样本客户数据列表，如下面的代码所示:

```cs public List GetCustomers() { var customers = new List { new Models.Customer() { CustomerCode = "ALFKI", CompanyName = "Alfreds Futterkiste", ContactName = "Maria Anderson", ContactTitle = "Sales Representative", Address = "Obere Str. 57", City = "Berlin", CreatedDate = new DateTime(2016,01,12) }, new Models.Customer() { CustomerCode = "AROUT", CompanyName = "Around the Horn", ContactName = "Thomas Hardy", ContactTitle = "Sales Representative", Address = "120 Hanover Sq.", City = "London", CreatedDate = new DateTime(2015,10,14)}, new Models.Customer() { CustomerCode = "CHOPS", CompanyName = "Chop-suey Chinese", ContactName = "Yang Wang", ContactTitle = "Owner", Address = "Hauptstr. 29", City = "Bern", CreatedDate = new DateTime(2010,7,14)}, new Models.Customer() { CustomerCode = "EASTC", CompanyName = "Eastern Connection", ContactName = "Ann Devon", ContactTitle = "Sales Agent", Address = "35 King George", City = "London", CreatedDate = new DateTime(2015,10,15)}, ... }; return customers; }

```
为了检索客户列表并将数据传递给视图，将CustomerController上的Index方法改为如下:

```cs public IActionResult Index() { var model = GetCustomers(); return View(model); }

```
接下来，在Views文件夹内创建一个名为Customer的新子文件夹。
右键单击新创建的Customer文件夹，选择添加 | 新项目...从上下文菜单中选择。
Select MVC View Page from the list of items, name the file Index.cshtml, and click on Add, as shown in the following screenshot:
将新添加视图的标记更改为以下内容:

```cs         @model IEnumerable        @{        Layout = "_Layout";        }

Customer List

                                                                                           @foreach (var customer in Model)        {                                                                }
Code Company Name Contact Name Address City Created
@customer.CustomerCode @customer.CompanyName @customer.ContactName @customer.Address @customer.City @customer.CreatedDate.ToString("d")



```

Code	Company Name	Contact Name	Address	City	Created
@customer.CustomerCode	@customer.CompanyName	@customer.ContactName	@customer.Address	@customer.City	@customer.CreatedDate.ToString("d")

在此标记中，table-striped、table-hover和table-bordered样式已添加到其id属性已设置为customer-table的表格中。您还会注意到，列标题名称被包装在<thead>元素中，表格行被包装在<tbody>元素中。

视图的 HTML 标记现在已经准备好了。完成以下步骤，为表启用 jQuery 数据表功能:

打开Views\Shared文件夹中的_Layout.cshtml文件。
通过在<head>元素中添加以下标记，添加对 jQuery DataTables基础和 Bootstrap 样式表的引用:

```cs

```
滚动到_Layout.cshtml文件的底部，添加对 jQuery 以及 Bootstrap JavaScript 文件的引用:

```cs

```
另外，确保在_Layout.cshtml文件的底部有一个名为脚本的部分声明:

```cs @RenderSection("scripts", required: false)

```
打开Views\Customer文件夹中的Index.cshtml文件。在文件底部添加以下代码:

```cs @section scripts{ $(document).ready(function () { $('#customer-table').DataTable(); }); }

```

在前面的步骤中，您已经添加了对DataTables样式表以及 JavaScript 文件的必要引用。您还创建了一个 jQuery 事件处理程序，一旦页面加载，它将在类名为table的所有 HTML 元素上启用 DataTable 功能。

当您运行项目并导航到客户视图时，您将看到客户列表自动分页为十个一组，并且您能够在表中搜索和排序数据，如下图所示。表的默认 Bootstrap 4 样式也得到正确应用:

Loading and displaying data in jQuery DataTables

数据表插件

jQuery DataTables 提供了很多内置特性和灵活性，但是如果您希望添加自己的特性或者需要额外的灵活性，它确实提供了插件架构。

注

这些只是数据表库可用的一些插件。要查看可用插件的完整列表，请访问https://datatables.net/plug-ins/index

日期排序

由于各种不同的日期格式，日期排序有时会非常具有挑战性。幸运的是，jQuery DataTables提供了一个使用Moment.js JavaScript 库对日期字段进行排序的灵活解决方案。

注

Moment.js 是一个免费的开源库，可以很容易地在 JavaScript 中显示、解析、操作和验证日期。你可以在http://momentjs.com/阅读更多关于 Moment.js 图书馆的信息。

要在上一示例中使用的Created Date列上启用日期排序，请完成以下步骤:

打开Views\Customer文件夹内的Index.cshtml文件。
通过在Index.cshtml文件的末尾添加以下代码，将moment.js库包含在您的视图中。请务必将其添加到dataTables.bootstrap.min.js文件之后:

```cs

```
接下来，通过在moment.js文件后添加以下行，将DataTables排序插件添加到视图中:

```cs

```
最后，更改视图中的 JavaScript 代码，初始化时刻排序库。您可以通过将其作为参数传递来指定应该排序的日期格式:

```cs $(document).ready(function () { $(document).ready(function () { $.fn.dataTable.moment('DD/MM/YYYY'); $('#customer-table').DataTable(); }); });

```

渲染

jQuery DataTables 呈现插件可以用来改变数据在表中的显示方式。为了将数据(在本例中是公司名称)限制在特定的长度，并以省略号(...)，例如，北风...，完成以下操作:

打开Views\Customer文件夹内的Index.cshtml文件。
通过在视图底部和 jQuery DataTables库之后添加以下内容来添加DataTables省略号数据呈现插件:

```cs

```
更改DataTables初始化代码以使用省略号插件。targets 参数用于指定在哪个列上使用插件:

```cs $('#customer-table').DataTable({ columnDefs: [{ targets: 1, render: $.fn.dataTable.render.ellipsis(15, true) }] });

```

省略号插件接受三个参数；第一个是限制显示的字符数，第二个是布尔值，指示截断是否不应出现在单词中间。最后一个布尔参数用于转义 HTML 实体。

数据表扩展

jQuery DataTables 插件提供了各种各样的扩展，可以极大地增强插件的功能。

注

要查看数据列表库所有可用扩展的列表，请参见https://datatables.net/extensions/index

ColReorder 扩展

ColReorder 扩展允许用户通过单击列标题并将其拖动到他们喜欢的位置来对表列重新排序。要为数据表启用列重新排序，请完成以下步骤:

打开_Layout.cshtml文件，添加对dataTables.colReorder.css文件的引用:

```cs

```
打开视图.cshtml文件，添加对DataTables colReorder扩展名 JavaScript 文件的引用:

```cs

```
最后，使用 jQuery，在页面加载后添加一个事件处理程序来初始化DataTables插件和 colReorder 扩展:

```cs $('#customer-table').DataTable({ colReorder: true });

```
When navigating to the page, you should now be able to drag and reorder the columns in the table. A blue line will be displayed when dragging a column, as illustrated in the following screenshot:

类型

请注意，扩展的所有样式表和 JavaScript 文件都是从DataTables CDN 中引用的。CDN 可在cdn.datatables.net获得

颜色按钮扩展

ColVis 扩展将一个按钮添加到数据表的顶部，单击该按钮时，会显示表中的列名列表，旁边有一个复选框。然后，用户可以取消选择他们不希望在网格中看到的列名。

要启用列可见性扩展，请执行以下步骤:

打开_Layout.cshtml文件，并添加对DataTables按钮扩展:

```cs

```

的 Bootstrap 4 特定样式表的引用 2. 打开view.cshtml文件，添加对DataTables按钮扩展名、Bootstrap 4 特定按钮扩展名以及按钮 ColVis 扩展名:

```cs

```

的引用 3. 最后，使用 jQuery，在页面加载后添加一个事件处理程序来初始化DataTables插件和 ColVis 扩展:

```cs         $('#customer-table').DataTable({        dom: 'Bfrtip',        buttons: [        'colvis'        ]        });

```

最后一步中的代码使用dom参数来指定控件元素在 DOM 中的位置。对于按钮，使用字母B。当导航到视图时，您应该会看到搜索框旁边的按钮，您可以使用该按钮显示或隐藏表中的列，如下图所示:

The ColVis buttons extension

复印和打印按钮扩展

使用相同的DataTables扩展，可以给表格添加一个工具栏，用户可以用它将表格内的数据复制到剪贴板，或者显示表格内数据的打印视图。这是一种非常简单的方法，让您的用户能够导出或打印他们的数据。

要启用表格的复制和打印功能，请执行以下步骤:

打开_Layout.cshtml文件，并添加对DataTables按钮扩展:

```cs

```

的 Bootstrap 4 特定样式表的引用 2. 接下来，打开视图并添加对DataTables按钮扩展、Bootstrap 4 特定按钮扩展、HTML 5 按钮扩展以及打印按钮扩展:

```cs

```

的引用 3. 最后，使用 jQuery，添加一个事件处理程序来初始化 DataTable 插件，并在页面加载后添加打印和复制按钮:

```cs         $(document).ready(function () {        $('#customer-table').DataTable({        dom: 'Bfrtip',        buttons: [        'copy', 'print'        ]        });        });

```

打开带有数据表的视图时，您应该会看到数据表上方有两个按钮，如下图所示:

The copy and print buttons extension

当用户点击复制按钮时，他们会看到一条消息，通知他们表格中的行数已经被复制到他们的剪贴板:

The copy and print buttons extension

如果用户点击打印按钮，将打开一个新的浏览器窗口，其中包含数据表中数据的打印机友好版本，并显示打印对话框:

The copy and print buttons extension

总结

在本章中，您已经使用 jQuery DataTables插件实现了一个可排序、可搜索和可扩展的 HTML 表。您还探索了如何指定插件应该使用 Bootstrap 4 风格。这一章也应该给你信心去探索其他开源插件，并把它们整合到你自己的 ASP.NET MVC 项目中。

在下一章也是最后一章，您将了解更多关于使用免费的 Visual Studio 代码编辑器创建使用 Bootstrap 4 进行样式设计的 ASP.NET MVC 站点的信息。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/32287.html

ASPDotNet 查看更多书籍

《ASP.NET MVC 和 Bootstrap》

分类

最近更新

ASPDotNet 七、在 Bootstrap 4 中使用 jQuery 数据表插件

七、在 Bootstrap 4 中使用 jQuery 数据表插件

jQuery 约会对象

向您的 ASP.NET MVC 项目添加数据表

使用数据表鲍尔包

使用 CDN

向数据表添加 Bootstrap 数据库样式

在 jQuery 数据表中加载和显示数据

Customer List

数据表插件

注

日期排序

注

渲染

数据表扩展

注

ColReorder 扩展

类型

颜色按钮扩展

复印和打印按钮扩展

总结

留言

联系客服

数据知识

系统公告

开发文档

ASPDotNet查看更多书籍

《ASP.NET MVC 和 Bootstrap》

ASPDotNet 七、在 Bootstrap 4 中使用 jQuery 数据表插件

七、在 Bootstrap 4 中使用 jQuery 数据表插件

jQuery 约会对象

向您的 ASP.NET MVC 项目添加数据表

使用数据表鲍尔包

使用 CDN

向数据表添加 Bootstrap 数据库样式

在 jQuery 数据表中加载和显示数据

Customer List

数据表插件

注

日期排序

注

渲染

数据表扩展

注

ColReorder 扩展

类型

颜色按钮扩展

复印和打印按钮扩展

总结

留言

联系客服

ASPDotNet 查看更多书籍