jQuery datatable问题与Expand-collapse

Question

I have a datatable with only one td , every td has a collapse element in it, on the first page everything is ok but on all other pages the element is displayed expanded and cannot be collapsed. As far as i can see the problem is that the second/third pages are already hidden and when i call them via the datatable it makes all the elements visible, I could not find a way around it and any help is much appreciated. this is the link http://86.107.56.8/ and the code is:

                $(document).ready(function() {
                oTable = $("#example").dataTable({
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bFilter": true,
                    "bInfo": false,
                    "aaSorting": [[ 2, "asc" ]],
                    "iDisplayLength": 2,
                    "aLengthMenu": [[2, 4, 6], [2, 4, 6]]
                });
            } );

        jQuery(document).ready(function() {
          jQuery(".content").hide();
          //toggle the componenet with class msg_body
          jQuery(".heading").click(function()
          {
            jQuery(this).next(".content").slideToggle(500);
          });
        });

    <div style="width:704px">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">

    <thead>
        <tr>
            <th width="100px">escala</th>
            <th width="520px">detalii</th>
            <th width="40px">pret</th>
            <th width="4px">valuta</th>
            <th width="40px">buton</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td width="60px" align="center"><p>Fara<br />escala</p></td>
            <td width="520px">
                <div class="layer1">
                    <p class="heading"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" style="background-color:#2f578b;color:fff;">Bucuresti - Baneasa BBU<br /> 24 Dec 06:05</td><td align="right" style="background-color:#2f578b;color:fff;">Roma - Ciampino CIA<br /> 24 Dec 07:10</td></tr></table></p>
                    <div class="content"><p>Detalii zbor</p></div>
                </div>
            </td>
            <td width="40px" align="right">10</td>
            <td width="4px" align="left">&euro;</td>
            <td width="40px" align="right">buton</td>
        </tr>
        <tr>
            <td width="60px" align="center"><p>Fara<br />escala</p></td>
            <td width="520px">
                <div class="layer1">
                    <p class="heading"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" style="background-color:#2f578b;color:fff;">Bucuresti - Baneasa BBU<br /> 24 Dec 06:05</td><td align="right" style="background-color:#2f578b;color:fff;">Roma - Ciampino CIA<br /> 24 Dec 07:10</td></tr></table></p>
                    <div class="content"><p>Detalii zbor</p></div>
                </div>
            </td>
            <td width="40px" align="right">10</td>
            <td width="4px" align="left">&euro;</td>
            <td width="40px" align="right">buton</td>
        </tr>
        <tr>
            <td width="60px" align="center"><p>Fara<br />escala</p></td>
            <td width="520px">
                <div class="layer1">
                    <p class="heading"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" style="background-color:#2f578b;color:fff;">Bucuresti - Baneasa BBU<br /> 24 Dec 06:05</td><td align="right" style="background-color:#2f578b;color:fff;">Roma - Ciampino CIA<br /> 24 Dec 07:10</td></tr></table></p>
                    <div class="content"><p>Detalii zbor</p></div>
                </div>
            </td>
            <td width="40px" align="right">10</td>
            <td width="4px" align="left">&euro;</td>
            <td width="40px" align="right">buton</td>
        </tr>
        <tr>
            <td width="60px" align="center"><p>Fara<br />escala</p></td>
            <td width="520px">
                <div class="layer1">
                    <p class="heading"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" style="background-color:#2f578b;color:fff;">Bucuresti - Baneasa BBU<br /> 24 Dec 06:05</td><td align="right" style="background-color:#2f578b;color:fff;">Roma - Ciampino CIA<br /> 24 Dec 07:10</td></tr></table></p>
                    <div class="content"><p>Detalii zbor</p></div>
                </div>
            </td>
            <td width="40px" align="right">10</td>
            <td width="4px" align="left">&euro;</td>
            <td width="40px" align="right">buton</td>
        </tr>
        <tr>
            <td width="60px" align="center"><p>Fara<br />escala</p></td>
            <td width="520px">
                <div class="layer1">
                    <p class="heading"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" style="background-color:#2f578b;color:fff;">Bucuresti - Baneasa BBU<br /> 24 Dec 06:05</td><td align="right" style="background-color:#2f578b;color:fff;">Roma - Ciampino CIA<br /> 24 Dec 07:10</td></tr></table></p>
                    <div class="content"><p>Detalii zbor</p></div>
                </div>
            </td>
            <td width="40px" align="right">10</td>
            <td width="4px" align="left">&euro;</td>
            <td width="40px" align="right">buton</td>
        </tr>
        <tr>
            <td width="60px" align="center"><p>Fara<br />escala</p></td>
            <td width="520px">
                <div class="layer1">
                    <p class="heading"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="left" style="background-color:#2f578b;color:fff;">Bucuresti - Baneasa BBU<br /> 24 Dec 06:05</td><td align="right" style="background-color:#2f578b;color:fff;">Roma - Ciampino CIA<br /> 24 Dec 07:10</td></tr></table></p>
                    <div class="content"><p>Detalii zbor</p></div>
                </div>
            </td>
            <td width="40px" align="right">10</td>
            <td width="4px" align="left">&euro;</td>
            <td width="40px" align="right">buton</td>
        </tr>
    </tbody>
</table>
</div>

Answer 1

Try this code $(this).next().slideToggle(500); (without selector in next function)

Answer 2

I can't tell for sure, since the link provided doesn't go to a DataTable page anymore.

My guess is that the problem is simply this: you are both hiding and binding click in the document ready function. That means it fires ONCE, when the document is ready. Those functions are not invoked again.

I'd have to take more time to look at the code to get a better feel for which elements to hide, but in general what you should be doing is sticking the hiding function into the plug-in's own fnDrawCallback initialization callback function. However, I'm actually not sure that hiding it with jQuery is the best way to go. Again, I'd have to dig more into the sample code.

Regarding the click, the table is "redrawn" when you go to the next page. If you are using jQuery 1.7+, you should use the .on() event binding function instead of .click() . This one can stay in the document ready function. However, you are going to select and assign a different listener than .heading() . And to do this we are going to modify the HTML a bit, too:

HTML:

<div class="tableWrapper" style="width:740px"> <!-- you should not have inline styles; you can add width to the new tableWrapper class -->
  <table> ... etc ... </table>
</div>

JS:

jQuery(".tableWrapper").on('click', '.heading', function()
    {
      jQuery(this).next(".content").slideToggle(500);
    });
});

Side note: I think you can pass nothing (void) in .next() since it's the first of the next siblings that you need. I'd have to check the docs.