select-all checkbox in a jquery data table with column filter

Question

Does anyone know how to add a checkbox in the column-filter plugin header of a jquery datatable? and when I check the checkbox, to trigger a callback (where I will 'check' all the checkboxes in the table or 'uncheck', if case)?

And no, I am not talking about this: http://jquery-datatables-column-filter.googlecode.com/svn/trunk/checkbox.html. I just need a plain old simple checkbox, not that rich-checkboxed dropdown. Something like on yahoo-mail - if you want an example.

I tried:

<script>

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

</script>

and it is not working. The cell in the header where the checkbox was supposed to be is empty (well, contains only the header value for that column, but there is no checkbox).

In case it matters:

• jquery-version: 1.8.3
• jquery.dataTables version: 1.9.4
• jquery.dataTables.columnFilter: 1.4.5

Update: I found also this link: https://code.google.com/p/jquery-datatables-column-filter/wiki/ColumnFilter. The bad news is it says nothing about checkboxes. The good news is just like someone managed to extend it, I might be able to do less (I don't need the entire checboxed-div).

Answer 1

I got the answer: there is no direct/easy way to do that, at least from what I've seen.

What I did:

a. I added a new custom filter control type, named "custom"; b. the aoColumns would have the following definition:

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

c. change the following function to look like this in jquery.dataTables.columnFilter.js:

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

d. And then, the new function (same file: 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. and the callback method would be like this:

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

Hope it helps someone and saves some time. Thanks.