2 questions about responsive

YoDavish

I have editor v 1.9.6, I have this code below in the js file

responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal( {
header: function ( row ) {
var data = row.data();
return 'Notes for ' +data['task']['barcode'] ;
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll()
}
},

1. Can I move the positioning of the "responsive" button from the first column to say the 4th or 5th column?
2. Rather than rendering all of the table data, can I perform a separate ajax call to request data from another table to display it's return data in the pop up modal?

colin

Yep, both are possible:

1. You can useresponsive.details.target to specify an alternative column
2. responsive.details.renderer can display the data however you like. The last example on that page would be a good place to start,

Colin

YoDavish

@colin
Thanks I got #1 question working now. But I'm unable to get #2 question to work, I'm hoping to use a create a new ajax call to request data from another table to display the data. Is there an example of that? Currently I am to display either visible data or hidden data like the example.

YoDavish

@colin
I see in this forum post:

https://datatables.net/forums/discussion/35568/ajax-in-render-function

That it's not recommended to put an ajax call inside a render function as it will slow down performance. Since the data I want to display is in a different table. How should include this data so I could render it?

kthorngren

That it's not recommended to put an ajax call inside a render function as it will slow down performance.

That thread is referring to columns.render which runs for each row and will drastically slow down rendering a table if ajax is called for each row. In your case you are using responsive.details.renderer when a row is clicked, fetching some data via ajax wouldn't be a big performance hit like using ajax in columns.render.

To use ajax with responsive.details.renderer you will need to take into consideration the asynchronous nature of Ajax. You will need to immediately return something that responsive.details.renderer can display like a table element. Then in the ajax success function append the data you want to that element. Here is one example:
http://live.datatables.net/kipijaxa/1/edit

The example is fetching the full 57 example rows from server but is only displaying the first row returned which is Tiger Nixon.

Kevin