kevin_marcus kevin_marcus - 4 months ago 22
jQuery Question

Accordion not showing second page of Data Tables

I'am working on my project and it seems like the JQuery Accordion is not showing in second page of datatables. here are my codes:

Jquery:

$(document).ready(function() {
$('#myTable').DataTable( {
"pageLength": 5
} );


for (var x = 1; x <= 10 ; x++) {
$('#accordion_' + x).find('.accordiontoggle-' + x).click(function () {

//Expand or collapse this panel
$(this).next().slideToggle('fast');


//Hide the other panels
$(".accordioncontent-" + x).not($(this).next()).slideUp('fast');

});
}


} );

HTML:

<table id="myTable">
<thead>
<tr>
<th>PO#</th>
<th>Vendor Name</th>
<th>Order Date</th>
<th>Items</th>
<th>Total Amount</th>
<th>Status</th>


</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sample1</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_1" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-1">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>2</td>
<td>Sample2</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_2" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-2">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>3</td>
<td>Sample3</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_3" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-3">2 more</a>
<div class="accordion-content default accordioncontent-3">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>4</td>
<td>Sample4</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_4" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-4">2 more</a>
<div class="accordion-content default accordioncontent-4">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>5</td>
<td>Sample5</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_5" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-5">2 more</a>
<div class="accordion-content default accordioncontent-5">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>6</td>
<td>Sample6</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_6" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-6">2 more</a>
<div class="accordion-content default accordioncontent-6">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>7</td>
<td>Sample7</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_7" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-7">2 more</a>
<div class="accordion-content default accordioncontent-7">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>8</td>
<td>Sample8</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_8" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-8">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>9</td>
<td>Sample9</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_9" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-9">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>10</td>
<td>Sample10<td>
<td>January 1, 1990</td>
<td>
<div id="accordion_10" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-10">2 more</a>
<div class="accordion-content default accordioncontent-10">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
</tbody>
</table>


I also indicated a Unique ID name per Div and also class name for it.

here is the link for my jsfiddle: https://jsfiddle.net/k3vin023/73phfh66/

Answer

Try it:

Javascript:

function showNext($this) {
 $this.next().slideToggle('fast');
}
$(document).ready(function () {
 $('#myTable').DataTable({
  "pageLength": 5
 });
});

HTML:

<table id="myTable">
                <thead>
                    <tr>
                        <th>PO#</th>
                        <th>Vendor Name</th>
                        <th>Order Date</th>
                        <th>Items</th>
                        <th>Total Amount</th>
                        <th>Status</th>


                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Sample1</td>
                        <td>January 1, 1990</td>
                        <td>
                            <div id="accordion_1" class="accordion">
                                <span>Item +</span> <a class="accordion-toggle accordiontoggle-1" onclick="showNext($(this))">2 more</a>
                                <div class="accordion-content default accordioncontent-1">
                                    <ul>
                                        <li> Item 1</li>
                                        <li> Item 2</li>
                                        <li> Item 3</li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                        <td>1.00</td>
                        <td>Open</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Sample2</td>
                        <td>January 1, 1990</td>
                        <td>
                            <div id="accordion_2" class="accordion">
                                <span>Item +</span> <a class="accordion-toggle accordiontoggle-2" onclick="showNext($(this))">2 more</a>
                                <div class="accordion-content default accordioncontent-1">
                                    <ul>
                                        <li> Item 1</li>
                                        <li> Item 2</li>
                                        <li> Item 3</li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                        <td>1.00</td>
                        <td>Open</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Sample3</td>
                        <td>January 1, 1990</td>
                        <td>
                            <div id="accordion_3" class="accordion">
                                <span>Item +</span> <a class="accordion-toggle accordiontoggle-3" onclick="showNext($(this))">2 more</a>
                                <div class="accordion-content default accordioncontent-3">
                                    <ul>
                                        <li> Item 1</li>
                                        <li> Item 2</li>
                                        <li> Item 3</li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                        <td>1.00</td>
                        <td>Open</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Sample4</td>
                        <td>January 1, 1990</td>
                        <td>
                            <div id="accordion_4" class="accordion">
                                <span>Item +</span> <a class="accordion-toggle accordiontoggle-4" onclick="showNext($(this))">2 more</a>
                                <div class="accordion-content default accordioncontent-4">
                                    <ul>
                                        <li> Item 1</li>
                                        <li> Item 2</li>
                                        <li> Item 3</li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                        <td>1.00</td>
                        <td>Open</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Sample5</td>
                        <td>January 1, 1990</td>
                        <td>
                            <div id="accordion_5" class="accordion">
                                <span>Item +</span> <a class="accordion-toggle accordiontoggle-5" onclick="showNext($(this))">2 more</a>
                                <div class="accordion-content default accordioncontent-5">
                                    <ul>
                                        <li> Item 1</li>
                                        <li> Item 2</li>
                                        <li> Item 3</li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                        <td>1.00</td>
                        <td>Open</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Sample6</td>
                        <td>January 1, 1990</td>
                        <td>
                            <div id="accordion_6" class="accordion">
                                <span>Item +</span> <a class="accordion-toggle accordiontoggle-6" onclick="showNext($(this))">2 more</a>
                                <div class="accordion-content default accordioncontent-6">
                                    <ul>
                                        <li> Item 1</li>
                                        <li> Item 2</li>
                                        <li> Item 3</li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                        <td>1.00</td>
                        <td>Open</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>Sample7</td>
                        <td>January 1, 1990</td>
                        <td>
                            <div id="accordion_7" class="accordion">
                                <span>Item +</span> <a class="accordion-toggle accordiontoggle-7" onclick="showNext($(this))">2 more</a>
                                <div class="accordion-content default accordioncontent-7">
                                    <ul>
                                        <li> Item 1</li>
                                        <li> Item 2</li>
                                        <li> Item 3</li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                        <td>1.00</td>
                        <td>Open</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>Sample8</td>
                        <td>January 1, 1990</td>
                        <td>
                            <div id="accordion_8" class="accordion">
                                <span>Item +</span> <a class="accordion-toggle accordiontoggle-8" onclick="showNext($(this))">2 more</a>
                                <div class="accordion-content default accordioncontent-1">
                                    <ul>
                                        <li> Item 1</li>
                                        <li> Item 2</li>
                                        <li> Item 3</li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                        <td>1.00</td>
                        <td>Open</td>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td>Sample9</td>
                        <td>January 1, 1990</td>
                        <td>
                            <div id="accordion_9" class="accordion">
                                <span>Item +</span> <a class="accordion-toggle accordiontoggle-9" onclick="showNext($(this))">2 more</a>
                                <div class="accordion-content default accordioncontent-1">
                                    <ul>
                                        <li> Item 1</li>
                                        <li> Item 2</li>
                                        <li> Item 3</li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                        <td>1.00</td>
                        <td>Open</td>
                    </tr>
                    <tr>
                        <td>10</td>
                        <td>Sample10</td>
                        <td>January 1, 1990</td>
                        <td>
                            <div id="accordion_10" class="accordion">
                                <span>Item +</span> <a class="accordion-toggle accordiontoggle-10" onclick="showNext($(this))">2 more</a>
                                <div class="accordion-content default accordioncontent-10">
                                    <ul>
                                        <li> Item 1</li>
                                        <li> Item 2</li>
                                        <li> Item 3</li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                        <td>1.00</td>
                        <td>Open</td>
                    </tr>
                </tbody>
            </table>

jsfiddle:

https://jsfiddle.net/73phfh66/3/

Comments