Changing Y/N to checkboxes but stayed sortable

eworbit

I want to tag a certain set of records in a database. I use the fnRowCallback to switch out a Y/N value for a checked or unchecked input box:
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if (aData[5] == "Y" ) {
var i='';
} else {
var i='';
}
$('td:eq(5)', nRow).html( i );
}


The ajax works and it calls out and changes the database the first time. The problem is that I need to change the actual contents of the cell to a Y/N to keep is synchronized and sortable and then run it through this callback to re-convert it back to another checkbox again.

Anyway, does anyone have a working example of translating text-to-checkboxes?

systematical

Have you looked at this: http://datatables.net/ref#fnUpdate

eworbit

Is it possible to include the fnUpdate() inside the fnRowCallback function. How would that be referenced to update cell aData[5], for example?

robertbrower

This solution might be outdated, but in many of my web pages I render the word "checked" or the word "unchecked" in the column of the table that I want to contain a check box. Then I use the aoColumnDefs to render the check box like so:

[code]
, "aoColumnDefs": [
{
"aTargets": [2]
, "bSearchable": false
, "fnRender": function (obj) {
var html = '';
return html;
}
, "bUseRendered": false
}
]
, "aaSorting": [[2, "asc"]]
[/code]

In the above code, fnRender renders a check box, either checked, or unchecked depending on whether the cell contains "checked" or "unchecked". The onclick event calls my page plugin's toggleParameter() function passing in useful information.

That function looks like this:

[code]
toggleParameter: function (event, obj, row, column) {
var $this = $(this),
data = $this.data('Default');

var result = toggleParameter($this, data.settings, event, obj, row, column);
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
return result;
}
[/code]

In the above code, the private toggleParameter function is called which looks like this:

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

$($.fn.dataTable.fnTables(true)).each(function (i, table) {
if ($.contains(settings.$dataTableContainer.get(0), table)) {
var $dataTable = $(table).dataTable();
var aData = $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[column] = $(obj).is(":checked") == true ? "checked" : "unchecked";
}
});

};

[/code]

This gives me a column that contains checkboxes that reflect the data, ie. "checked" or "unchecked" and I can sort on this column as well.

Like I said, this might be a deprecated approach but I use it extensively and it works great. Good luck.

Robert