Responsiveness not working correctly after adding rows dynamically

[Tklaversma]

Hi Allan,

As you state here, adding a row dynamically to a responsive DataTable works the same way as adding it to a non-responsive DataTable; using row.add(). For some reason, this is not working as shown here. Am I doing something wrong or is it broken?

Besides my findings written above, I do got a working example on my current project with using ajax to add <td>'s to the table and then call table.columns.adjust().draw() in the end. Unfortunately in this case, when rows are added dynamically, the responsiveness of the DataTable isn't working correctly.

Here you will find a non-working example. You can see on the right side that a column is still half visible, instead of added to the dropdown (+). Here you will find a working example. You can see that all columsn that don't fit are added to the dropdown (+).

Hope you can help me out..

TK

[DataTables]

Thanks for posting this. It might be a while before I can look into it in detail. Got a blacklog of support requests just now.

[Tklaversma]

No problem. In the mean time I'll look for myself as well. If I find a/the solution, I'll update this post.

[DataTables]

I suspect that this might have been an issue in the DataTables API. However, using the latest code for both DataTables and Responsive has it working as expected: http://jsfiddle.net/4pry7og5/159/ .

[Tklaversma]

Awesome!! All seem to work correctly now. When can we expect the dev versions to be published (datatables 1.10.11 and Responsive 2.0.1)?

[DataTables]

Responsive 2.0.1 next week, but DataTables will likely be early next month.

[Tklaversma]

Ok, just implemented the new Responsive and DataTables and all works just find now.

Thanks!

[iyilm4z]

I try to implement simple inline-editing but i'm having a problem after adding new a row dynamically with responsive table feature of dt. Buttons in Action column disappear when mobile mode is on. What i'm missing?

With full screeen all is ok.

<table class="table table-striped table-bordered table-hover" id="resources-table"></table> produces below

<table class="table table-striped table-bordered table-hover responsive nowrap" style="width:100%" id="resources-table"></table> produces below

[DataTables]

Can you open a new issue in the forums with a link to a test case showing the issue.

[iyilm4z]

I will try to open. But does anyone have an idea why this happens?

[iyilm4z]

Here is the code reproduces my case. https://jsfiddle.net/q74axjfm/4/