Modal Bootstrap with another button?

lenamtl

Based on this Bootstrap Modal https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html
I'd like to use another button to open the modal (located into another div of the row) instead the Responsive +- Button to keep the default responsive button behavior.

Any clue?
Thanks

allan

I don't quite understand what you mean by

to keep the default responsive button behavior.

The default behaviour is to show the button. Could you clarify that please?

Allan

lenamtl

Hi,

Responsive default behavior for me is to show the + button and if you click on it it display the detail with a toggle.

In the modal Bootstrap example it's use the same button but instead of showing the details in toggle it show all row info into a modal windows.

So what I like to do is to keep the responsive as it is by default and add a button into another column, when click on this button it will show all row info in a modal like it does for the modal but using another button.

So I the table have both features.

allan

Thanks for the clarification. There is currently no option to be able to use both display modes. What I would suggest is that you add a button and a little bit of custom code to have it display the modal, and keep the default Responsive behaviour of showing in the child row.

Allan

lenamtl

Ok but which function should I use... clone?

I know how to show data to modal this is not the problem,
But what I want is to show is the exact same data of the table if a column is hidden I don't want to display it in a modal....

allan

You could use cells().data():

var data = table.cells( row, ':visible' ).data();

where row is the identifier for the row you want to get the data for. The :visible selector will get the cells which are visible only.

Allan

lenamtl

I'm trying to understand how row index work with simple alert box

Based on this example

$('#example tbody').on( 'click', 'tr', function () {
alert( 'Row index: '+table.row( this ).index() );
} );

How could I pass your code to it, to get the correct row id?

var data = table.cells( row, ':visible' ).data();

allan

Don't use the index, just pass this as the row selector since it it the tr element!

Allan

lenamtl

I'm getting object Object as result not the content of the row...

allan

object Object is just the result of {object}.toString(). Since alert() can only show strings that is fully expected. The object is the row's data object!

I would very strongly suggest you use console.log() rather than alert. In fact, I would go as far as suggesting that alert never be used ever again :-).

Allan