How to check checkboxes on filtered rows?

Rourke

I have a single checkbox in the thead TR and every tbody TR. The ones in the tbody are for individual selection, but I want the checkbox in the thead to check all visible (also on other pages) row checkboxes. So if I filter it, check the checkbox in the thead it only needs to select the affected rows.

I have this as you could suspect:

[code]
$('.dataTable input.selectAll').click(function(){

if($(this).prop('checked')==false){
$('input', oTable.fnGetNodes()).prop('checked',false);
}
else{
$('input', oTable.fnGetNodes()).prop('checked',true);
}

})
[/code]

This checks every single checkbox, even when they are hidden after a search filter.

After a lot of searching I figured the function fnGetFilteredNodes would have been perfect for me, but apparently it's redundant according to http://www.datatables.net/forums/discussion/comment/37013#Comment_37013. The right method would be by using:

[code]table._('tr', {"filter":"applied"});[/code]

This returns arrays of data of every single rows' cell, but I have no idea how to check the affected rows checkboxes. Could anyone help me out?

pricejt

Did you figure this out? I am trying to do exactly the same thing.

allan

[code]
table.$('tr', {"filter":"applied"}).prop('checked',true);
[/code]

robertbrower

Allan, does your answer set the underlying data values in aoData? I've been doing this quite differently, but with a lot more code.

1. The first column of my table contains "checked" or "unchecked".
2. I use aoColumnDefs option to specify fnRender for the first column, e.g.

[code]
, "aoColumnDefs": [
{
"aTargets": [0]
, "bSearchable": false
, "fnRender": function (obj) {
if (obj.aData[4] == "No" && obj.aData[5] == null) {
return '';
} else {
return '';
}
}
, "bUseRendered": false
}
.
.
.
[/code]

***Note... there is some logic in the above script which controls whether the checkboxes are enabled or disabled depending on values columns 4 and 5.

3. My Page's jquery plugin exposes the method specified in the onclick handler above:

[code]
var toggleCopyRecipe = function ($this, settings, event, obj, row, column) {

$($.fn.dataTable.fnTables(true)).each(function (i, table) {
if ($.contains(settings.$copyRecipeTableContainer.get(0), table)) {
var $dataTable = $(table).dataTable();
var aData = $dataTable.fnGetData(row);
if (aData[4] == "No" && aData[5] == null) {
// Most browsers change the state of the checked atttribute before dispatching the event
// and reset the state if the event is cancelled, i.e. return false.
// http://bugs.jquery.com/ticket/3827
aData[0] = $(obj).is(":checked") == true ? "checked" : "unchecked";

}

var enabled = false;
aData = $dataTable.fnGetData();
$.each(aData, function (i, data) {
if (data[0] == "checked") {
enabled = true
}
});

if (enabled) {
settings.$copyRecipeDialog.parent().find(".ui-dialog-buttonpane button:first").button("enable");
}
else {
settings.$copyRecipeDialog.parent().find(".ui-dialog-buttonpane button:first").button("disable");
}
}
});
};
[/code]

***Note... my datatable is inside a UI dialog, therefore there is some logic in the above script which controls whether the OK button of the dialog is enabled or disabled depending on whether or not there are any rows checked.

4. There is a checked and an unchecked checkbox in the TH of column 0 which check all or uncheck all of the checkboxes. In the method which creates the datatable, I apply handlers to these checkboxes:

[code]

$this.find("input.toggle-all").click(function (event) {
if (settings.remainingCopies > 0) {
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
return false;
}

var $checkbox = $(this);
// Most browsers change the state of the checked atttribute before dispatching the event
// and reset the state if the event is cancelled, i.e. return false.
// http://bugs.jquery.com/ticket/3827
var text = ($checkbox.is(":checked") == true ? "unchecked" : "checked");
var filteredRows = settings.$copyRecipeDataTable.$('tr', { "filter": "applied" });
$.each(filteredRows, function (index, tr) {
var data = settings.$copyRecipeDataTable.fnGetData(tr);
if (data[4] == "No" && data[5] == null) {
data[0] = text; //// CAUTION INDICIES
settings.$copyRecipeDataTable.fnUpdate(data, tr, null, false, false);
}
});

settings.$copyRecipeDataTable.fnDraw();

var enabled = false;
var aData = settings.$copyRecipeDataTable.fnGetData();
$.each(aData, function (index, data) {
if (data[0] == "checked") {
enabled = true;
}
});

if (enabled) {
settings.$copyRecipeDialog.parent().find(".ui-dialog-buttonpane button:first").button("enable");
}
else {
settings.$copyRecipeDialog.parent().find(".ui-dialog-buttonpane button:first").button("disable");
}

return false;
});

settings..$copyRecipeDataTable = settings.$copyRecipeTable.dataTable({
"bJQueryUI": true
, "sPaginationType": "full_numbers"
, "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
.
.
.

[/code]

This approach allows me to sort on the column with the checkboxes and when the datatable is exported to csv via TableTools, the first column contains "checked" or "unchecked".

Allan, this works just fine, but your code is smaller =) Does it do the same thng or merely set the checked state of the checkboxes?

I hope this helps the original poster.

Robert