fnUpdate updating the row with "stale" data
fnUpdate updating the row with "stale" data
I've been having this issue for a few days. I've developed a half-baked work-around, via updating the DOM manually, but I'm happy with it since it is essentially a band-aid, and not a real solution.
When I'm trying to update a row in my datatable, the fnUpdate method appears to be using the "pre-updated" values. Note that the jquery selector has been changed to $j and not $.
Here is my code for updating the DOM elements "manually".
[code]
// update the DOM elements since the fnUpdate wasn't working as expected
$j('#' + selectedRowId_ + ' td').each(function(index, value){
switch(index) {
case 0:
$j(this).text(pta);
break;
case 6:
$j(this).text(expires);
break;
}
});
[/code]
Using the fnUpdate method,
[code]
selectors_.$currentData.fnUpdate(selectedRow_[0], selectedRowIndex_, 0);
[/code]
where selectedRow_ is set as follows
[code]
var trs = selectors_.$currentData.fnGetNodes();
var length = trs.length;
for (var i=0 ; i < length ; i++ ) {
if ( $j(trs[i]).hasClass('row-selected') ) {
selectedRow_.push( trs[i] );
}
}
return retVal;
[/code]
and, selectedRowIndex_ is set as follows
[code]
selectedRowIndex_ = selectors_.$currentData.fnGetPosition($j(this).closest('tr').get(0));
[/code]
I have tried exclusively using the fnUpdate method, but it wasn't updating the values as I expected. Here is that code.
[code]
selectors_.$currentData.fnUpdate(pta, parseInt(selectedRowIndex_, 10), 0, false, true); // first column
selectors_.$currentData.fnUpdate(expires, parseInt(selectedRowIndex_, 10), 6, false, true); // sixth column
selectors_.$currentData.fnDraw();
[/code]
When I update the DOM manually, the screen looks ok but datatables doesn't respect the new value.
Datatable initialization options:
[code]
"bAutoWidth": false,
"bUseRendered": true,
"bDestroy": true,
"bInfo": false,
"bFilter": true,
"bScrollCollapse": false,
"bScrollInfinite": false,
"bJQueryUI": true,
"bPaginate": false,
"bSort": true,
"sScrollY": "80px",
"iDisplayLength": 5,
"sZeroRecords": "No matching records found",
"fnRowCallback": "function ( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$j(nRow).prop('id', 'pta-row-' + i++); // assign a unique id to each row
// attach double click
.dblclick(function() {
// get the selected row ''; this is the index of the sorted datatable
selectedRowIndex_ = selectors_.$currentData.fnGetPosition($j(this).closest('tr').get(0));
selectedRow_ = getSelected();
selectedRowId_ = $j(nRow).prop('id');
// snipped code to show
return nRow;
}",
"aoColumns": [
{"sTitle": "col1"},
{"sTitle": "col2"},
{"sTitle": "col3"},
{"sTitle": "col4"},
{"sTitle": "col5"},
{"sTitle": "col6"},
{"sTitle": "col7"}
]}
}
[/code]
When I'm trying to update a row in my datatable, the fnUpdate method appears to be using the "pre-updated" values. Note that the jquery selector has been changed to $j and not $.
Here is my code for updating the DOM elements "manually".
[code]
// update the DOM elements since the fnUpdate wasn't working as expected
$j('#' + selectedRowId_ + ' td').each(function(index, value){
switch(index) {
case 0:
$j(this).text(pta);
break;
case 6:
$j(this).text(expires);
break;
}
});
[/code]
Using the fnUpdate method,
[code]
selectors_.$currentData.fnUpdate(selectedRow_[0], selectedRowIndex_, 0);
[/code]
where selectedRow_ is set as follows
[code]
var trs = selectors_.$currentData.fnGetNodes();
var length = trs.length;
for (var i=0 ; i < length ; i++ ) {
if ( $j(trs[i]).hasClass('row-selected') ) {
selectedRow_.push( trs[i] );
}
}
return retVal;
[/code]
and, selectedRowIndex_ is set as follows
[code]
selectedRowIndex_ = selectors_.$currentData.fnGetPosition($j(this).closest('tr').get(0));
[/code]
I have tried exclusively using the fnUpdate method, but it wasn't updating the values as I expected. Here is that code.
[code]
selectors_.$currentData.fnUpdate(pta, parseInt(selectedRowIndex_, 10), 0, false, true); // first column
selectors_.$currentData.fnUpdate(expires, parseInt(selectedRowIndex_, 10), 6, false, true); // sixth column
selectors_.$currentData.fnDraw();
[/code]
When I update the DOM manually, the screen looks ok but datatables doesn't respect the new value.
Datatable initialization options:
[code]
"bAutoWidth": false,
"bUseRendered": true,
"bDestroy": true,
"bInfo": false,
"bFilter": true,
"bScrollCollapse": false,
"bScrollInfinite": false,
"bJQueryUI": true,
"bPaginate": false,
"bSort": true,
"sScrollY": "80px",
"iDisplayLength": 5,
"sZeroRecords": "No matching records found",
"fnRowCallback": "function ( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$j(nRow).prop('id', 'pta-row-' + i++); // assign a unique id to each row
// attach double click
.dblclick(function() {
// get the selected row ''; this is the index of the sorted datatable
selectedRowIndex_ = selectors_.$currentData.fnGetPosition($j(this).closest('tr').get(0));
selectedRow_ = getSelected();
selectedRowId_ = $j(nRow).prop('id');
// snipped code to show
return nRow;
}",
"aoColumns": [
{"sTitle": "col1"},
{"sTitle": "col2"},
{"sTitle": "col3"},
{"sTitle": "col4"},
{"sTitle": "col5"},
{"sTitle": "col6"},
{"sTitle": "col7"}
]}
}
[/code]
This discussion has been closed.