元素的选择器，以及一些配置选项。
其中，data选项表示要展示的数据，columns选项表示数据表格的列配置信息，包括列标题和对应的数据字段。
高级用法
除了基本使用外，sunil-datatables还提供了许多高级功能，如排序、筛选、分页等。
排序
在数据表格中进行排序，可以让用户方便地找到所需的数据。
sunil-datatables提供了两种排序方式：升序和降序。我们可以在列配置中设置orderable选项，来启用排序功能：
-------- -
- ------ ------- ----- ------- ---------- ---- --
- ------ ------ ----- ------ ---------- ------
- ------ -------- ----- -------- ---------- ---- --
-
筛选
筛选功能可以让用户根据自己的需求，从大量数据中筛选出符合条件的数据。
sunil-datatables提供了两种筛选方式：搜索和自定义筛选。搜索功能可以根据关键字对整个数据表格进行搜索，而自定义筛选则需要在列配置中设置一个对应的筛选器。
首先，我们来看一下搜索功能的使用方法。我们可以在表格上方添加一个搜索框，并通过调用sunil-datatables的search方法来触发搜索操作：
------ ----------- ------------------
------- -------------------------------
--------
--- ----- - --- -------------------------- -
-- ------ --
---
--------------------------------------------------------------- ---------- -
--- ------- - ----------------------------------------------
----------------------
---
---------上面的代码中，我们给搜索框和按钮分别设置了id属性，并注册了一个点击事件。当用户点击搜索按钮时，我们获取到搜索框中输入的关键字，然后调用table.search方法来对数据表格进行搜索。
接下来是自定义筛选功能的使用方法。为了启用自定义筛选器，我们需要在列配置中为相应的列设置一个筛选器：
-------- -
- ------ ------- ----- ------- ------- --------- -------------- --------- ------ ---------- -------- ----------
- ------ ------ ----- ------ ---------- ------
- ------ -------- ----- -------- ---------- ---- --
-
上面的代码中，我们为第一列（Name）设置了一个下拉框筛选器，其中filterOptions表示下拉框中的选项。
分页
当数据表格中的数据量较大时，分页功能可以将数据分成多页进行展示，以提高用户体验。
sunil-datatables提供了分页器组件Pager，我们可以通过将Pager实例传入表格配置，来启用分页功能：
---- -----------------
------ ---------------------
--------
--- ----- - --- -------------------------------
--- ----- - --- -------------------------- -
----- -----
-------- -
- ------ ------- ----- ------ --
- ------ ------ ----- ----- --
- ------ -------- ----- ------- --
--
------- - ------ ----- -- -- ---------
---
---------示例代码
最后，我们将上述所有功能整合起来，提供一个完整的示例代码：
----- ----------------------------------- -----------------
------- -------------------------------------------
------ ----------- ------------------
------- -------------------------------
---- -----------------
------ ---------------------
--------
--- ---- - -
- ----- -------- ---- --- ------ -- --
- ----- ------ ---- --- ------ -- --
- ----- ---------- ---- --- ------ -- --
- ----- -------- ---- --- ------ -- --
- ----- -------- ---- --- ------ -- -
--
--- ----- - --- -------------------------------
--- ----- - --- -------------------------- -
----- -----
-------- -
- ------ ------- ----- ------- ------- --------- -------------- --------- ------ ---------- -------- ----------
- ------ ------ ----- ------ ---------- ------
- ------ -------- ----- -------- ---------- ---- --
--
------- - ------ ----- --
---
--------------------------------------------------------------- ---------- -
--- ------- - ----------------------------------------------
----------------------
---
---------总结
通过本教程，我们了解了如何使用npm包sunil-datatables来构建并定制数据表格，并使用排序、筛选、分页等功能来提高表格使用体验。
sunil-datatables的定制化程度非常高，可以根据不同的需求来灵活配置。学会了这些基础用法后，建议多尝试一些高级用法，来进一步提高自己的前端开发技能。
来源：JavaScript中文网 ，转载请联系管理员！
本文地址：https://www.javascriptcn.com/post/600557e781e8991b448d4f7e