DataTables

Hi allan,

That is exactly what i am looking for.

Thank you,

akibar

Just changed location: http://datatables.net/plug-ins/api#fnGetFilteredData

Allan

Where is http://datatables.net/plug-ins/api#fnGetFilteredData ?

Thanks Allen.

I solved my problem by using the dollar sign API method in conjunction with fnGetData, fnUpdate, and fnRedraw. Here's my code for anyone interested.

In my case I have 2 checkboxes in the first column header. They both have the toggleAll class applied. One is checked, the other is not. When the user clicks the checked checkbox, then all filtered rows should be checked. When the user clicks the unchecked checkbox then all filtered eows should be unchecked.

My HTML table contains "unchecked" in the first cell of each row. Then I initialize my plugin:



settings.$dataTable = $this.find("#TrendParametersTable").dataTable({
"bJQueryUI": true
, "sPaginationType": "full_numbers"
, "sScrollY": "250px"
, "aoColumnDefs": [
{
"aTargets": [0]
, "bSearchable": false
, "fnRender": function (obj) {
var html = '<input name="trendParameter" type="checkbox"' + (obj.aData[0] == 'checked' ? ' checked="checked"' : '') + '" value="' + obj.aData[1] + '" onclick="$.fn.TrendParameters.Toggle(this, ' + obj.iDataRow + ', ' + obj.iDataColumn + ');" />';
return html;
}
, "bUseRendered": false
}
, {
"aTargets": [1]
, "bSearchable": false
, "bVisible": false
}
]
, "aaSorting": [[2, "asc"]]
});

I use fnRender to render a checkbox with the appropriate state in the first column of each row. This is so I can sort by which rows are checked. Note... the use of bUseRendered: false is required in order to sort on the text in the cell and not the rendered checkbox.

$this.find("input.toggleAll").click(function () {
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.$dataTable.$('tr', { "filter": "applied" });

$.each(filteredRows, function (index, tr) {
var data = settings.$dataTable.fnGetData(tr);
data[0] = text;
settings.$dataTable.fnUpdate(data, tr, null, false, false);
});

settings.$dataTable.fnDraw();
return false;
});

I apply a click handler to the checkboxes in the header of the first colum. Using Allen's suggestion (I actually used the $ api method instead), I can figure out which rows exist after considering the filter (search). Then I get the data for each row and update it. After all updates, I call fnDraw() to refresh the visible rows.

The onclick handler for the checkboxes rendered in fnRender looks like this:

$.fn.TrendParameters.Toggle = function (obj, row, column) {
var $table = $($.fn.dataTable.fnTables(true))
var aData = $table.dataTable().fnGetData(row);
// 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";
};

It merely sets the data to the correct state. Note... fnUpdate and fnDraw are not needed here since the action of clicking on the checkbox in the first place checks it. And fnUpdate doesn't seem to be required in order for the data to be persistent.

Thanks Allen.

Bob

Hi Allan,

Can you please link me to http://datatables.net/plug-ins/api#fnGetFilteredData, as we still use Datatables 1.8.2.
I am sure there would be more users who are still dependent on DT 1.8.2.
So it will be useful if you could get back that page.

Thanks,
Swad