Puzzling fnUpdate() behavior in DataTables-1.9.1
Puzzling fnUpdate() behavior in DataTables-1.9.1
robertbrower
Posts: 158Questions: 1Answers: 0
The user can save parameters, i.e. which rows in the data table they have selected, via check boxes, and what color is selected in each row. This gets stored in the database as JSON, for example:
[code]
{
"Parameters":{
,"Rows":[
{
"Name":"LOGICAL_NAME_1"
,"Color":"Red"
}
,{
"Name":"LOGICAL_NAME_2"
,"Color":"Blue"
}
]
}
}
[/code]
Later, the user can select which parameters they want to load from the database. When they do, the following code is executed which is supposed to update the data table and redraw it with the correct rows selected and with the correct color. This however doesn't work and I have spent a lot of time trying to figure out why.
[code]
$.each(obj.Parameters.Rows, function (i, row) {
var rows = settings.$dataTable.$('tr');
$.each(rows, function (j, tr) {
var data = settings.$dataTable.fnGetData(tr);
if (data[1] == row.Name) {
data[0] = "checked";
data[7] = row.Color;
} else {
data[0] = "unchecked";
data[7] = data[8]; // column at index 8 has the default color for the row and is hidden.
}
settings.$dataTable.fnUpdate(data, tr, null, false, false);
});
});
settings.$dataTable.fnDraw(true);
[/code]
When the user submits, the following code is supposed to get the selected rows and colors:
[code]
var Rows = [];
$.each(settings.$dataTable.fnGetData(), function (index, data) {
if (data[0] == "checked") {
Rows.push({ Name: data[1], Color: data[7] });
}
});
[/code]
Rows only ever contains the first of 2 rows that I select.
Great plugin. I hope someone can help.
Thanks a lot.
Robert.
[code]
{
"Parameters":{
,"Rows":[
{
"Name":"LOGICAL_NAME_1"
,"Color":"Red"
}
,{
"Name":"LOGICAL_NAME_2"
,"Color":"Blue"
}
]
}
}
[/code]
Later, the user can select which parameters they want to load from the database. When they do, the following code is executed which is supposed to update the data table and redraw it with the correct rows selected and with the correct color. This however doesn't work and I have spent a lot of time trying to figure out why.
[code]
$.each(obj.Parameters.Rows, function (i, row) {
var rows = settings.$dataTable.$('tr');
$.each(rows, function (j, tr) {
var data = settings.$dataTable.fnGetData(tr);
if (data[1] == row.Name) {
data[0] = "checked";
data[7] = row.Color;
} else {
data[0] = "unchecked";
data[7] = data[8]; // column at index 8 has the default color for the row and is hidden.
}
settings.$dataTable.fnUpdate(data, tr, null, false, false);
});
});
settings.$dataTable.fnDraw(true);
[/code]
When the user submits, the following code is supposed to get the selected rows and colors:
[code]
var Rows = [];
$.each(settings.$dataTable.fnGetData(), function (index, data) {
if (data[0] == "checked") {
Rows.push({ Name: data[1], Color: data[7] });
}
});
[/code]
Rows only ever contains the first of 2 rows that I select.
Great plugin. I hope someone can help.
Thanks a lot.
Robert.
This discussion has been closed.
Replies
Allan
The following aoColumnDefs definition renders a checkbox in the column at index 0.
[code]
{
"aTargets": [0]
, "bSearchable": false
, "fnRender": function (obj) {
var html = '';
return html;
}
, "bUseRendered": false
}
[/code]
The following code handles the checkbox click event. It obtains the DataTable by getting the visible DataTable contained by the known container. It calls fnUpdate specifying NOT to redraw. However, fnRender IS called when this function gets called. Is that correct?
[code]
$.fn.Default.Toggle = function (obj, row, column) {
var $tableContainer = $("div.center-center-center-south");
$($.fn.dataTable.fnTables(true)).each(function (i, table) {
if ($.contains($tableContainer.get(0), table)) {
var $dataTable = $(table).dataTable();
var data = $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
data[0] = $(obj).is(":checked") == true ? "checked" : "unchecked";
$dataTable.fnUpdate(data, row, undefined, false, false);
}
});
};
[/code]
***Note... I had to change the line in the original post from:
settings.$dataTable.fnUpdate(data, tr, null, false, false);
to:
settings.$dataTable.fnUpdate(data, tr, undefined, false, false);
because 1.9.4 complained when this was called with null and not undefined whereas 1.9.1 did not.
***EDIT*** I've figured out the problem and it was on my side. In the second code block in the orignal post, the inner loop should have been the outer loop and the outer loop should have been the inner loop. I'm feeling pretty sheepish now. I'm very sorry for wasting your time. I'm leaving my code in this post so others may benefit from it, i.e. How to add checkboxes to a DataTable, although I'm sure I posted similar code in the past.
The second code block in the original post should be:
[code]
var rows = settings.$dataTable.$('tr');
$.each(rows, function (j, tr) {
var data = settings.$dataTable.fnGetData(tr);
var parameter = null;
$.each(parameters.TrendParameters, function (i, p) {
if (data[1] == p.Name) {
parameter = p;
}
});
if (parameter == null) {
data[0] = "unchecked";
data[7] = data[8];
} else {
data[0] = "checked";
data[7] = parameter.Color;
}
settings.$dataTable.fnUpdate(data, tr, undefined, false, false);
});
settings.$dataTable.fnDraw(true);
[/code]
I'm still a little interested in whether or not settings.$dataTable.fnUpdate(data, tr, undefined, false, false) should cause fnRender to get called.
Thanks Allan!
Robert