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

Question

我想使用YADCF扩展名，以便我可以按照其状态对表格中的数据进行排序。我希望能够单击一个按钮（bootstrap药丸），然后成为过滤数据的触发器，但我无法弄清楚如何这样做。下面你可以看到WHMCS的一个例子，这就是我希望发生的事情

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

我能够完全使用Select元素，但我要问的是：如何让每个按钮/药丸触发每种状态的过滤器？

到目前为止，这是我对该表的代码

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

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

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

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

您应该为该列添加一个过滤器，并将其隐藏起来，并添加几个按钮/跨度/ etc，其中onclick事件将调用yadcf external api 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>