Bootstrap modal

hpt520

I tried the example in this page:
https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html

But i don't see the image for the modal(the plus image under the name column).
I also see all columns.

Here is my demo page:

http://tros.gr/modal/

hpt520

Sorry, now the link is working.

hpt520

please help???

hpt520

It seems that it is not working properly if you are running Mozilla or Chrome.

My test page is working fine on my iphone with Safari.

Any idea how to fix it?

hpt520

Tried once more in jsfiddle...

https://jsfiddle.net/bx8q4628/

It is not working...
AND there is no support

pkwdadmin

The "+ button" only shows if you have at least one column being hidden due to there not being enough space - that's the point of the responsive extension.

On this page: https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html
the email column is hidden, so the "+ button" shows.

On your demo page: http://tros.gr/modal/
the email column is visible, so the "+ button" is not shown. It is shown if you resize your window to be narrow enough that the email column is hidden.

I'm not sure how to make the "+ button" always be visible, it's not obvious.

hpt520

Thank you for your reply.

You are correct.

But is it possible to have the two first column visible and the rest columns hidden?

I have around 2K rows in my datatable.
Each row have 8 columns.
I want the user to search and narrow the results. After that, to click the row and a modal will show all the columns.

Is it possible?

pkwdadmin

Yes, that's possible.

For example, look at: https://datatables.net/reference/option/columns.visible

hpt520

Thank you.

After reading and testing, no success.
The only success is that i will have a small brake for walk and buy a new mouse.

I want to have a datatable in my bootstrap site.
I want to have only the first two column visible and the third with an font-awesome (+).
If the user click the (+) it will show the modal page with the rest columns.
The datatable must have pagination, sort(in visible columns) and search field(global is preferred).

I think that the example in this page is perfect:
https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html

The only think is to hide the rest columns.

Here is the code to hide the first column.
$('#example').dataTable( {
"columnDefs": [
{ "visible": false, "targets": 0 }
]
} );

How the code from the example will look like.
https://jsfiddle.net/bx8q4628/

Thank in advance for any help...

hpt520

Update...

After sleep and relax, column hide is working.

Now i am trying to have responsive with only column 0 and 1. The trick is to have always visible the plus image for the modal.

Is it possible?