Refreshing the search and filter with new data from the html

gemmell

I have a situation where the HTML in the cell gets updated directly, and I want to tell datatables to update it's search and filtering internal models.

I know that to update things you should use fnUpdate, but consider a TD which is contenteditable - the data has already been updated, I just want to now tell datatables that there's new data there, and for it to go read it and update it's internal model (and refresh the search). I've had a look at fnUpdate but I'm not really well enough versed to make what I want.

Any help or pointers appreciated.

I've tried
[code]
UpdateDataTableRow: function ($dt, tr)
{
//console.assert($.fn.DataTable.fnIsDataTable($dt))
var latestHtml = $(tr).children().map(function () {
return $(this).html();
}).toArray();
$dt.fnUpdate(latestHtml, tr);
},
[/code]

But I'm getting a "TypeError: Attempted to assign to readonly property. jquery.dataTables.js:6151" which is this line:
[code]
/* Array update - update the whole row */
oSettings.aoData[iRow]._aData = mData.slice();
[/code]

gemmell

I've just found _fnGatherData, I'm going to see what I can do with it.

_fnSetCellData looks like the function I want. Coupled with:
[code]
/* Modify the search index for this row (strictly this is likely not needed, since fnReDraw
* will rebuild the search array - however, the redraw might be disabled by the user)
*/
var iDisplayIndex = $.inArray( iRow, oSettings.aiDisplay );
oSettings.asDataSearch[iDisplayIndex] = _fnBuildSearchRow(
oSettings,
_fnGetRowData( oSettings, iRow, 'filter', _fnGetColumns( oSettings, 'bSearchable' ) )
);
[/code]

gemmell

This works:
[code]
$(nRow).on('blur', 'input, [contenteditable]', function (e) {
var $closestTd = $(this).closest('td');
if ($closestTd.length > 0) {
var aPos = $dt.fnGetPosition($closestTd[0]);
$dt.fnUpdate($closestTd.html(), aPos[0], aPos[2]); //could put a false here to not redraw, but I want it to reorder/research
}
});
[/code]

allan

DataTables 1.10 has a new `invalidate()` method for rows, columns and cells, which tells DataTables to read data from the original data source (in this case the HTML). So you would do something like `table.row( {row-selector} ).invalidate().draw();` in 1.10. The other method is to use the `row().data()` method, which is just like fnUpdate in 1.9-. That is the correct way to do it :-).

Allan

gemmell

Thanks Allan, invalidate is exactly what I need. Hopefully others will find this post. Reminds me of that de-motivational poster: It may be your only purpose in life is to serve as a warning to others...

allan

Better to think of it as motivational! It means that DataTables is heading in the right direction :-)

Allan

gemmell

So the extension to this is about focus.

Lets say that I enter some data into a contenteditable field, I hit enter, which I catch and tell DT to update. In the mean time I want it to keep the focus. The problem is that DT will potentially move these elements to another spot, thus killing them off and then re-creating them. Apart from storing away the ID, and refocusing on that, is there some way I can get the focus to follow the cell on update? E.g. If I wanted it to keep the same selection and everything?