Modal details display - HTML

daveos

Is the HTML right in the Modal details display example?

tangerine

That's a pretty vague question. What exactly are you questioning?

daveos

The HTML seems off:

<table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">$(document).ready(</code><code class="js keyword">function</code><code class="js plain">() {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">$(</code><code class="js string">'#example'</code><code class="js plain">).DataTable( {</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">responsive: {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">details: {</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">display: $.fn.dataTable.Responsive.display.modal( {</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">header: </code><code class="js keyword">function</code> <code class="js plain">( row ) {</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">data = row.data();</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js string">'Details for '</code><code class="js plain">+data[0]+</code><code class="js string">' '</code><code class="js plain">+data[1];</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">} ),</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">renderer: $.fn.dataTable.Responsive.renderer.tableAll()</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number13 index12 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number14 index13 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">} );</code></div><div class="line number15 index14 alt2"><code class="js plain">} );</code></div></div></td></tr></tbody></table><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2" style="display: none;">1</div></td><td class="code"><div class="container" style="display: none;"><div class="line number1 index0 alt2" style="display: none;">&nbsp;</div></div></td></tr></tbody></table>

kthorngren

Maybe you can describe what you are expecting. Just saying it "seems off" doesn't tell us where to look.

Kevin

daveos

I'm talking about this:
http://live.datatables.net/bobucayo/1/edit

I just realized it was also included in other examples. Could you explain to me what it does?

daveos

I mean I know it's the js in that example, but why include it in an html table like that?

kthorngren

All you did was post the code from the page. The test case doesn't run. Again please specify exactly what you are asking about.

I just realized it was also included in other examples.

What is "it" that is included in other examples. We want to help but you need to provide specific information.

Kevin

daveos

http://live.datatables.net/pixohira/1/edit
I added the comments Part1 and Part2 to explain myself better.

• Part 1: the actual HTML necessary to create a table.
• Part 2: the JS in an HTML format;

It just confuses me that the JS would be included in the HTML like that. Is it necessary?

kthorngren

Part 1: the actual HTML necessary to create a table.

This is for the main table.

Part 2: the JS in an HTML format;

The responsive.details.renderer builds an HTML element to display the modal. Which will be removed when closing the modal. The HTML is needed to display the modal.

Kevin

daveos

OK I feel like there's huge misunderstanding here.
What I'm trying to say is:

Why is the same js code included in both the HTML tab and the Javascript tab.

Why include the js code in the HTML tab in the first place?

daveos

Now I feel bad for creating all this confusion and wasting your time. I just wanted to understand. Thank you for taking the time to answer anyway.

The thing is, I'm trying to use the Modal Details Display on my table http://live.datatables.net/bomitozo/1/edit but it doesn't want to work. So I'm wondering if that js in the HTML (that I haven't included) has something to do with it.

kthorngren

Why is the same js code included in both the HTML tab and the Javascript tab.

The HTML tab shows the HTML to build the table. Your screenshot shows that it was not rendered properly on your page but its just the HTML for the table. not Javascript code is shown in that tab.

I'm trying to use the Modal Details Display on my table (http://live.datatables.net/bomitozo/1/edit) but it doesn't want to work

It does work. Your example's width doesn't take much of the display. Depending on the window size it may start like this:

Making the page display smaller causes responsive to kick in and you can click the button to display the modal:

Kevin

daveos

Oooh so the HTML tab is only rendered wrong on my browser... I cleared the cache and cookies and it works now. I thought the HTML table was always weird... Sorry about that!

Making the page display smaller causes responsive to kick in and you can click the button to display the modal:

Oh! I did not think of that. So the ModalDetailDisplay only shows when the page is small? What can I do to leave it on at all times?

kthorngren

You have a bunch of columns you are hiding with columns.visible. Instead you can use Responsive Classes to hide them so Responsive is always has column hidden and the button is available to click. Like this:
http://live.datatables.net/dimebaxu/1/edit

Kevin

daveos

You not only cleared up my confusion, but you also helped me solve my problem.
Thank you so much for your time and patience, Kevin!

kthorngren

Glad you got it working BTW, I've seen that HTML tab formatting problem before too.

Kevin