Dynamically changing cell content

Dynamically changing cell content

flarpyflarpy Posts: 47Questions: 0Answers: 0
edited February 2013 in General
Hi Allan

I am investigating the best way to dynamically change data in a particular cell. I think the correct approach is to use fnUpdate which I understand is the api to allow manipulation of the underlying data.
[code]
var iCol = findColumnNumber('membershipStatusText', $('#programtable').dataTable().fnSettings().aoColumns);
$('#programtable').dataTable().fnUpdate('new value', 0, iCol, false); // false because I don't want to redraw the table
[/code]
I would like to pass the 2nd argument to fnUpdate as the aoData index as per the docs. My question is, how do I find what the index is where I have a large (1-2k records) json array?

Alternatively, is there a better approach?

Thanks

Replies

  • allanallan Posts: 63,213Questions: 1Answers: 10,415 Site admin
    > My question is, how do I find what the index is where I have a large (1-2k records) json array?

    Use fnGetPosition to get the data index from a row. However, I would recommend against using fnGetPosition - it has no benefit (performance wise) and only serves to confuse (it is deprecated in 1.10).

    So the real question is, how do you know which row you want to update? Do you have an ID in the data to use, or a DOM node to use?

    Allan
  • flarpyflarpy Posts: 47Questions: 0Answers: 0
    Each object in the json data has an id property, that would be the surest identifier. The button that initiates the change event has that id as an attribute, so is easily available in the event.
  • allanallan Posts: 63,213Questions: 1Answers: 10,415 Site admin
    Okay - one way to do it then is to use fnGetData to get the full data set behind the table. fnGetData returns the data in the same index order as the internal cache, so you can use a loop to loop over the data set and find what you are looking for, and the index where your data is found, is the position to pass into fnUpdate.

    It does mean you have the cost of a loop, but that lookup must be done somehow :-). If you were going to be doing it a lot (.i.e. the fnUpdate is inside a loop itself) then you might want to create a mapping object, one where the parameters are the id's and the values are the array indexes - which would make it a simple property lookup.

    Allan
  • flarpyflarpy Posts: 47Questions: 0Answers: 0
    Works great, thanks. Code below in case it is useful for anyone.

    NB. To anyone doing something similar, note the use of parseInt on 2nd argument to fnUpdate. Otherwise it doesn't work, presumably because datatables thinks a string is a reference to a DOM element rather than an index in aoData

    [code]
    var iCol = findColumnNumber('membershipStatusText', $('#programtable').dataTable().fnSettings().aoColumns);
    var data = $('#programtable').dataTable().fnGetData();
    for (var e in data) {
    if (data[e].id == membership.programID) {
    $('#programtable').dataTable().fnUpdate(membership.statusText, parseInt(e), iCol, false, false);
    drawFilterRow();
    break;
    }
    }
    [/code]
  • allanallan Posts: 63,213Questions: 1Answers: 10,415 Site admin
    > presumably because datatables thinks a string is a reference to a DOM element rather than an index in aoData

    Exactly that - it checks for a number, and if so it uses it as the index in the array.

    Good to hear you got it working!

    Allan
This discussion has been closed.