Refreshing the search and filter with new data from the html
Refreshing the search and filter with new data from the html
gemmell
Posts: 5Questions: 0Answers: 0
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]
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]
This discussion has been closed.
Replies
_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]
[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
Allan
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?