2 questions about responsive
2 questions about responsive
YoDavish
Posts: 123Questions: 46Answers: 3
in Responsive
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()
}
},
- Can I move the positioning of the "responsive" button from the first column to say the 4th or 5th column?
- 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?
This question has an accepted answers - jump to answer
Answers
Yep, both are possible:
responsive.details.targetto specify an alternative columnresponsive.details.renderercan display the data however you like. The last example on that page would be a good place to start,Colin
@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.
@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?
That thread is referring to
columns.renderwhich runs for each row and will drastically slow down rendering a table if ajax is called for each row. In your case you are usingresponsive.details.rendererwhen a row is clicked, fetching some data via ajax wouldn't be a big performance hit like using ajax incolumns.render.To use ajax with
responsive.details.rendereryou will need to take into consideration the asynchronous nature of Ajax. You will need to immediately return something thatresponsive.details.renderercan display like atableelement. 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