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).

Just making sure, are you running this after the element (or document) is ready? Any chance for a jsFiddle? — MasterAM, Sep 17 '13 at 23:44
Yes, it's on document ready. The table and everything else behaves and they were supposed to. It's just this single header-checkbox that does not 'work' as I want to. About fiddle, I'll try to put the code there later. It's too late for me here ... to be honest, I was hoping for a quick-fix/hint from someone who was hit by this problem before. But if there's no alternative, we'll go this way! Thanks! — dcg, Sep 17 '13 at 23:54

score 2 · Accepted Answer · answered Sep 18 '13 at 22:58

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.

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

1 Answers1