使用 YADCF 过滤数据表 - 自定义按钮触发器

Question

我想使用 YADCF extension so that I can sort the data in my table by it's status. I want to be able to click a button (bootstrap pills) and for that to then be the trigger for filtering the data, however I can't figure out how to do so. Below you can see an example from WHMCS，这就是我希望发生的事情

目前我已经能够过滤数据，但只能使用 select 下拉菜单。正如您在下面看到的，这是我的 table 和按钮的外观（包括来自 YADCF 添加的 Select 元素）

我能够让 Select 元素完全工作，但我想问的是：如何让每个人 button/pill 为每种状态触发过滤器？

这是我目前 table 的代码

yadcf.init(ticketsTable, [
    {
        column_number: 2,
        filter_container_id: 'test_container_0',
        column_data_type: "html",
        html_data_type: "text",
        filter_default_label: "Select Status"

    },
],
    {
        externally_triggered: false
    }
);

如有任何帮助，我们将不胜感激。

Answer 1

如果你想要实现的只是custom pills你根本不需要使用我的yadcf插件，你可以单独使用简单的Datatables api，查看 following jsbin sample 并查看代码片段：

var oTable;
function myPillFilter(data) {
  oTable.columns(0).search(data).draw();
}
$(document).ready(function(){
  oTable = $('#example').DataTable();
});

但是如果你想使用 yadcf 插件...

您应该为该列添加一个过滤器并将其隐藏，并添加几个按钮/跨度等 onclick 将调用 yadcf 外部 [=31] 的事件=] exFilterColumn

见下文quick jsbin sample I made

代码片段：

var oTable;
function myPillFilter(data) {
    yadcf.exFilterColumn(oTable, [[0, data]]);
}
$(document).ready(function(){
  oTable = $('#example').dataTable().yadcf([
    {column_number : 0, filter_container_id: "some_data"}]);
});



<div onclick="myPillFilter('Some Data 1')">
   some-1
</div>
<div onclick="myPillFilter('Some Data 2')">
   some-2
</div>

使用 YADCF 过滤数据表 - 自定义按钮触发器

Datatables Filtering with YADCF - Custom button triggers

javascript

jquery

datatables

yadcf