Datatables V2.0 table().row().node() behavior change from v1.10?

minifiredragon

I have been trying to move to Datatables v2, and I seem to have come across another hiccup. And it most likely is something I am overlooking in the change docs, but I do not know.

In version 1.10, I could:

var table = $j('#t'_Table').DataTable();
var row = table.row('#row_'+d.data.ID);
var node = row.node();

$j(node).find('.cssCompTot').addClass('sqsCompSelf');

And it would find all the cells (<td></td>) with that class and add the additional class.

Now, in v2, it does not work that way. And not matter what I have tried (been through every google post I could find) it will not add the class. And when I console.log() the length is 0.

What has changed and how do I fix it?

minifiredragon

Just delete this post please.

Firefox Console can be a pain in the but sometimes by updating its outputs. The problem came down to it was trying to find a class that did not exist because the table was not rendered yet, even though firefox was giving the correct answer of 2 when I was testing $j(row.now).find(....).

minifiredragon

Hmmm, this problem is driving me crazy, and I may... MAY... have found a bug. It appears when the sort is triggered, it redraws the table removing any styling I have put on the table after post.

I noticed this trying to track down problem listed above. When the table loads, I see all the colors I added to specific columns. When I push the sort button on the column, it clears all the styling I added.

Edit: I do want to add that I got a message from one of my employees who was using the new table telling me that when ever a table edit happens, the whole table gets refreshed and they are back to page 1 vs staying where they were at editing.

minifiredragon

I am trying to make a live.datatables.net example, but when I switched from nightly to 2.0.4 it stopped working.

https://live.datatables.net/jefuqina/2/edit

kthorngren

Take a look at the browser's console. The test case is generating this error:

Uncaught ReferenceError: jQuery is not defined

You have the script tags in the wrong order and you are loading datatables.js twice. Updated test case:
https://live.datatables.net/jefuqina/3/edit

The DT 2.0 upgrade doc states that deferRender is now enabled in 2.0. See this section. That is why row().node() doesn't work except on the visible page.

Set deferRender to false. You may also want to use rows().every() to iterate all the rows. Like this:
https://live.datatables.net/gurafelo/1/edit

Kevin

minifiredragon

@kthorngren

I was looking at just the error that was saying the Datatable is not defined, totally overlooked JQuery was not first in the list (kind of depended on the add library doing things in correct order to be honest).

As for the deferRender option. I looked at and for some reason I associated with the new layout tag and the old dom tag still being active, so I moved on.

Now re reading it, it maybe what I need to do. I suppose I could move the change color script into rowCallback and createdRow part. And would explain why when I shift order the information is gone, and perhaps will help with the Editor, when updating a row, not send the user back to page 1.

kthorngren

I suppose I could move the change color script into rowCallback and createdRow part.

rowCallback executes for the rows displayed on the page. It will run each table draw. Use this if you need to update the table display based on chagnes to the table.

createdRow executes once for each row when the row is added. Might be more efficient if table changes don't affect the display.

perhaps will help with the Editor, when updating a row, not send the user back to page 1.

If you are using draw() or ajax.reload() as part of the edit update process then that is what is causing page 1 to be displayed. Either API supports a parameter that controls paging. Pass false as the parameter to stay on the same page. See the docs for the API being used.

Kevin

minifiredragon

@kthorngren

Most of my issues seem to be I have used Datatables 1.10 for so long I forgot what settings could be set and moving to v2 I have to relearn it all over again. All I did on the new table was change with js and css to point to the new version. V1.10 with the editor, does not change the page when an edit occurs.

As for

If you are using draw() or ajax.reload() as part of the edit update process then that is what is causing page 1 to be displayed. Either API supports a parameter that controls paging. Pass false as the parameter to stay on the same page. See the docs for the API being used.

No, I only set

$j('#t_Table').on( 'click', 'tbody td:not(.readonly)', function (e)
{
     t_TableEditor.inline( this, { submit: 'changed'} );
});

And do not do anything beyond that with the Editor.

kthorngren

This inline edit example submits on allIfChanged instead of changed but it doesn't revert to page 1 ofter editing.

Possibly this thread will help.

It sounds like there is an event handler firing that is causing page 1 to be displayed. Please post your Editor and Datatables Javascript code - maybe we can see something obvious.

Maybe you can provide a test case showing the issue. Can you link to your page or update this base Editor template?
https://live.datatables.net/guwafemu/491/edit

Kevin

minifiredragon

I added the ajax.reload() to the editor section and it fixed the issue. I am assuming it is just one of those updates where defaults have changed. As I come across more issues (I think this is the last one besides a fomantic problem I need to figure out how to make a live.datatables for to show). I know I need to double check the default settings on and see if there was a change.

Here is what I added for other peoples reference:

reload: 
{   
   callBack: null,
   resetPaging: false
}

minifiredragon

Update:

Adding
deferRender: false,
to the table initialization did not stop the table from stripping out the css I added after table was loaded and sort function was used.

minifiredragon

@kthorngren

I misread your post here:

This inline edit example submits on allIfChanged instead of changed but it doesn't revert to page 1 ofter editing.

I forgot this is a setting I changed in the new table. The older version that was not changing to back to page 1 did use that setting. Setting the ajax.reload() options fixed the issue anyway.

kthorngren

did not stop the table from stripping out the css I added after table was loaded and sort function was used.

Can you post a test case showing this issue?

I updated my example to add this CSS:

.rose {
  background: orange;
}

Angela, Ashton and Tiger's cells stay orange upon sorting the table.

https://live.datatables.net/gurafelo/3/edit

Kevin

minifiredragon

I was working on a test case earlier, and with the settings that are provided by default I could not get it to work. So I want to try and build something as close as I can to what I have and test that, but I will be on the road the next few days.

I do need to make one because I am having a problem with fomantic styling in the header which stems from datatables.