Datatables 1.9.4 get live row data

autumndev

Hi All,

I have a legacy DataTable that has a range of hidden columns that the user can show, then edit the cell via editable, then hide again.

each cell has a hidden text input which editable populates when the value changes. I have foudn that in datatables 1.9.4 i can

    var r = oTable.$('tr');
    //loop through datatables rows
    for (var i = 0; i < r.length; i++) {
     //get current rows data
     var c = r[i];
     if (i === 0) {
       //convert to jQuery object
       jc = jQ(c);
       var changed = jc.find('.rowChanged').val();
     }
    }

which gets me the current live data but only for columns that are showing.

I tried oTable.fnGetData(c) passing the current row but this give me the initial starting html for each cell and not the live html (some inputs may have changed)

is there a way to return a jQuery object similar to the oTable.$() api call that contains the entire rows live data and not just the visible rows?

allan

Hi,

The oTable.$('tr') that you have should actually go through all rows, regardless of the row visibility. The fact that this isn't the case makes me suspect that you have server-side processing enabled for your table. Is that the case?

If so, the problem with this approach with server-side processing is that only the visible rows actually exist on the client-side. The whole point of server-side processing is that the other rows aren't present in order to get a performance boost from their absence.

Are you able to link me to the page so I could take a closer look?

Thanks,
Allan

autumndev

Hi Allan,

There is no server side processing - all the rows are showing correctly with oTable.$(tr) however the issue is that in each row it is only showing the visible column (some columns are hidden by user selection)

I need to see all columns regardless of visibility. If i show all columns first then I get to see the data, for example first off there was 7 columns visible, when doing oTable.$('tr') i can see, for each row, 7 children in the tr[0] object. if i then display 10 columns i get 10 children.

I basically need to get each columns data in order to grab the hidden fields in each column so as to update a database, the user can select which columns are shown and hide/show columns on the fly.

is this possible? using oTable.fnGetData('tr') gives me all the column data but only for the initial data - not changed data. for exmaple if i tick an check box it still shows as unchecked in the dom returned not checked as is live on the screen.

autumndev

sorry I didnt see:

Are you able to link me to the page so I could take a closer look?

unfortunately its an intranet system.. and my clients would have to authorise your access to it due to PCI compliance.

allan

Thanks for the clarification on the fact that it is the column visibility that is causing the issue. That would indeed cause a problem as the DataTables $() method operates on the tr element.

In 1.9.4 you will need a plug-in to be able to get access to the hidden cells - specifically the fnGetTds plug-in.

Based upon your above code you would have:

var r = oTable.$('tr');
//loop through datatables rows
for (var i = 0; i < r.length; i++) {
 //get current rows data
 var c = r[i];
 if (i === 0) {
   //convert to jQuery object
   jc = jQ( oTable.fnGetTds( c ) );
   var changed = jc.find('.rowChanged').val();
 }
}

I'm not entirely sure what the above code is trying to do, as it is only doing something on the first row in the table, and assigning a locally scoped variable. Is it just that you simplified the code for posting here / debugging?

Thanks,
Allan

autumndev

HI Allan,

The code was an example + debugging output - there are 1277 rows in the table and i didn't want to have all that outputted to the console for debugging.

it basically loops through each row, finds the hidden input.rowChanged and (now) checks to see if it is equal to 1, if so get all input in that row jc.find('input') and add to a jquery form variable, then submit the form.

in the end I managed to get it to work by showing all columns, grabbing the row data then hiding the relevant columns again.

However your solution is a lot better so will probably implement that later.

Thanks for the help :)