概述
angular-datatables.net-bs 是一个基于 AngularJS 框架和 DataTables 插件开发的 npm 包。该包能够实现网页表格的数据交互，并且整合了 Bootstrap 的样式风格，使用方便且具有良好的可扩展性。该文章将向大家介绍该包的使用方法，包括安装、初始化、基本配置等。
安装
在使用 angular-datatables.net-bs 之前，我们需要先安装该包。我们可以通过 npm package manager 软件进行安装，方式如下：
npm install angular-datatables.net-bs --save
推荐在项目中使用这种方式进行安装，此命令会将包添加到项目的 package.json 文件中的 dependencies 中，并且会自动安装包的依赖项。
初始化
在安装完该包后，我们进行初始化，初始化该包需要先建立 AngularJS 依赖注入的注入器。
var app = angular.module('myApp', ['datatables']);在进行初始化的时候，我们需要解决以下两个问题：
- 如何创建表格？
- 如何获取数据？
我们采用依赖注入的方式实现这两个问题的解决：
-- -------------------- ---- -------
------ -------------- ------------------------- -------------------------------- ----------------- -------
-------
----
-----------
--------- ---------
-------- ---------
-----
--------
-------
--- ----------------- -- ------------
----------------------
-----------------------------
----------------------------
-----
--------
--------在上述代码中，我们使用 datatable="ng" 将数据表 注入到 AngularJS 注入器中，使用 dt-options="vm.dtOptions" 和 dt-column-defs="vm.dtColumnDefs" 分别定义表格的选项和表格列的模板。
为了获取数据，我们需要添加控制器：
-- -------------------- ---- -------
--- --- - ----------------------- ----------------
------------------------ ---------------- ----------------- ---------------- -
--------- - ---
----------------- - -
---- -- ---------- ------ --------- -------
---- -- ---------- ------- --------- -------
---- -- ---------- --------- --------- -------
--
------------------- - -----------------------------
-----------------------------------
-----------------------
---------------------- - -
------------------------------------------------
------------------------------------------------------- -------
----------------------------------------------------- ------
--
--我们定义了一个控制器 myCtrl，用于获取数据并且配置数据表选项和表格列的模板。在上述代码中，我们使用 $scope 定义一个叫做 vm 的变量，用于存放表格的选项和表格列的模板，使用 $scope.vm.persons 存放表格所需要的数据。
使用 DTOptionsBuilder 和 DTColumnBuilder 构造函数生成表格选项和模板。
基本配置
通过上述初始化过程，我们已经成功的创建了一个数据表格。接下来，我们可以对其进行基本的设置，包括：分页、排序、搜索等。
分页
DataTable 默认提供了两种分页形式：数字按钮式和简单页码式。我们可以通过 $scope.vm.dtOptions 自定义分页器：
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(10)
.withOption('paging', true) // 显示分页器或者你可以手动构建分页器：
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('simple_numbers')
.withDisplayLength(10)
.withOption('paging', true)
.withOption('pagingType', 'simple')排序
DataTable 可以流畅地进行排序。我们可以通过 DTColumnBuilder 对需要排序的表格列进行配置：
DTColumnBuilder.newColumn('name').withClass('min-width').withTitle('Name').withOption('sort', true),
DTColumnBuilder.newColumn('status').withTitle('Status').withOption('sort', true),
DTColumnBuilder.newColumn('age').withTitle('Age').withOption('visible', false).withOption('type', 'num').withOption('sort', true)搜索
DataTable 可以通过搜索框对表格数据进行查询。我们可以通过 $scope.vm.dtOptions 启用搜索框：
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(10)
.withOption('paging', true)
.withOption('searching', true) // 启用搜索框显示列
DataTable 也可以自行控制要显示的列。我们可以使用 DTColumnDefBuilder 对列进行控制：
$scope.vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0).notSortable().notVisible(), // 对 Id 列进行设置
DTColumnDefBuilder.newColumnDef(3).notSortable().renderWith(function(data, type, full, meta) {/*Rendering function*/}), // 对 Status 列进行设置
DTColumnDefBuilder.newColumnDef(7).notSortable().notVisible() // 对 Age 列进行设置
]示例代码
下面是一个完整的示例代码，方便大家理解该包的用法。
-- -------------------- ---- -------
--------- -----
------
------
-------------------------------- ------------
----- ---------------------------------------------------------------------- -----------------
----- ----------------------------------------------------------------- -----------------
----- -------------------------------------------------------------------- -----------------
------- ------------------------------------------------------
------- ------------------------------------------------------------------------
------- ---------------------------------------------------------------------------
------- --------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------
------- -------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----------------
------------------------ ---------------- ----------------- ---------------- -
--------- - ---
----------------- - -
---- -- ---------- ------ --------- -------
---- -- ---------- ------- --------- -------
---- -- ---------- --------- --------- -------
--
------------------- - -----------------------------
-----------------------------------
----------------------
--------------------- -----
------------------------ -----
-------------------- ---- -------- -- ---------
-----------------
---------------------- - -
------------------------------------------------
------------------------------------------------------- -------
----------------------------------------------------- ------
--
---
---------
-------
----- ---------------
---- -----------------------
------ -------------- ------------------------- -------------------------------- ----------------- -------
-------
----
-----------
--------- ---------
-------- ---------
-----
--------
-------
--- ----------------- -- ------------
----------------------
-----------------------------
----------------------------
-----
--------
--------
------
-------
-------总结
通过以上内容的介绍，我们已经可以使用 angular-datatables.net-bs 来快速地创建一个数据表格了。除了介绍中的基础用法，在实际的开发中，我们可能还需要对表格进行调整和定制，这需要您更加深入的理解学习。同时， DataTable 插件还提供了许多其他的高级功能，这些功能可以提高数据交互的能力和可靠性。希望本文可以为大家提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005579a81e8991b448d49b2