jquery - 带列过滤器的 jquery 数据表中的全选复选框

Question

有谁知道如何在 jquery 数据表的列过滤器插件标题中添加复选框？当我选中复选框时，触发回调(我将“选中”表中的所有复选框或“取消选中”，如果是这样)？

不，我不是在谈论这个:http://jquery-datatables-column-filter.googlecode.com/svn/trunk/checkbox.html 。我只需要一个普通的旧简单复选框，而不是那个丰富的复选框下拉菜单。类似雅虎邮箱的东西 - 如果你想要一个例子。

我尝试过:

<script>

var oTable = $('table#table_muc').dataTable();
oTable.columnFilter({
   "sPlaceHolder": "head:after",
   "iFilteringDelay": 0,
   "aoColumns":[
       { "type": "checkbox" },
       {},
       {},
       {},
       {},
   ]
});

</script>

而且它不起作用。标题中应包含复选框的单元格为空(嗯，仅包含该列的标题值，但没有复选框)。

如果重要的话:

• jquery-版本:1.8.3
• jquery.dataTables 版本:1.9.4
• jquery.dataTables.columnFilter:1.4.5

更新:我还发现了这个链接:https://code.google.com/p/jquery-datatables-column-filter/wiki/ColumnFilter 。坏消息是它没有提到复选框。好消息是，就像有人设法扩展它一样，我可能可以做得更少(我不需要整个 checkboxed-div)。

Answer 1

我得到了答案:没有直接/简单的方法可以做到这一点，至少从我所看到的来看是这样。

我做了什么:

a.我添加了一个新的自定义过滤器控件类型，名为“custom”；b. aoColumns 将具有以下定义:

"aoColumns":[
{ "type": "custom", "callback": fnControlCallback }, 
{},
{},
{},
{},
{}]

c.在 jquery.dataTables.columnFilter.js 中将以下函数更改为如下所示:

function _fnRangeLabelPart(iPlace) 
{
  ...
  switch (aoColumn.type) 
  {
  ...
    case "custom":
      if (null != aoColumn.callback && undefined != aoColumn.callback) 
      {
        fnPrepareForCallback(oTable, aoColumn);
      }
      break;

d.然后，新函数(同一文件:jquery.dataTables.columnFilter.js):

function fnPrepareForCallback(oTable, aoColumn) {
    var index = i;
    var s = aoColumn.callback(oTable, aoColumn, $(this));

    var object = $(s);
    th.html(object);
}

e.回调方法如下:

function fnControlCallback(oTable, aoColumn, o) { return '<input type="checkbox">'; }

希望它可以帮助别人并节省一些时间。谢谢。