Refreshing the search and filter with new data from the html

Refreshing the search and filter with new data from the html

gemmellgemmell Posts: 5Questions: 0Answers: 0
edited November 2013 in Feature requests
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]

Replies

  • gemmellgemmell Posts: 5Questions: 0Answers: 0
    edited November 2013
    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]
  • gemmellgemmell Posts: 5Questions: 0Answers: 0
    edited November 2013
    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]
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • gemmellgemmell Posts: 5Questions: 0Answers: 0
    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...
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Better to think of it as motivational! It means that DataTables is heading in the right direction :-)

    Allan
  • gemmellgemmell Posts: 5Questions: 0Answers: 0
    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?
This discussion has been closed.