介绍
yadcf 是一个能够实现 DataTables 表格的筛选功能的轻量级 jQuery 插件。它可以通过 Ajax 或者 JavaScript 数组来加载数据，并且支持多列、复杂的筛选条件。本文将详细介绍如何使用 yadcf 进行前端开发。
安装
安装 yadcf 很简单，只需要在命令行输入以下命令即可：
npm install yadcf --save
使用方法
基本用法
要使用 yadcf 进行表格筛选，必须首先引入 DataTables 和 yadcf 的 JavaScript 文件和 CSS 文件。然后，在 HTML 页面中定义一个 table 元素，并在相应的 JavaScript 中进行初始化。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ---- ----- --------------
----- ---------------- --------------- -------------------------------------------------------------------
----- ---------------- --------------- -------------------------------------------------------------------------------------
-------
------
------ ------------ ----------------
-------
----
-------------
-----------------
---------------
------------
--------- ---------
---------------
-----
--------
-------
----
--------- ----------
---------- --------------
------------------
-----------
-------------------
-----------------
-----
---
--------
--------
------- -----------------------------------------------------
------- ------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------
--------
-------------------------- -- -
--- ----- - --------------------------
----------------- -
--------------- ---
--------------- ---
--------------- ---
--------------- ---
--------------- ---
--------------- --
---
---
---------
-------
-------在 JavaScript 中，我们首先使用 jQuery 的选择器获取到要进行表格筛选的 table 元素，然后将其传入 DataTables 的初始化函数中。接着，在 yadcf 初始化函数中，定义了每个列需要进行筛选，这里是对所有列进行了筛选。yadcf 的 init() 函数接受两个参数：一个是 DataTables 对象，另一个是一个包含所有列需要进行筛选的信息的数组。
此时打开页面即可看到表格已经可以支持关键字搜索和范围筛选了。
高级用法
除了基本的表格筛选功能之外，yadcf 还支持更复杂的筛选条件，如下拉菜单、多列组合筛选等。接下来我们将介绍一些高级用法。
下拉菜单筛选
下拉菜单筛选是常见的筛选方式，它可以让用户选择特定的值来对某一列进行筛选。使用 yadcf 实现下拉菜单筛选非常简单，只需要在 init() 函数中为相应的列添加一个 filter_type 属性即可。例如，我们要为第二列（Position）增加一个下拉菜单筛选，代码如下：
$(document).ready(function () {
var table = $('#example').DataTable();
yadcf.init(table, [
{column_number: 0},
{column_number:
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/36264) ，转载请注明来源
[https://www.javascriptcn.com/post/36264](https://www.javascriptcn.com/post/36264)