手风琴不显示数据表的第二页

Question

我正在处理我的项目，jQuery 手风琴似乎没有显示在数据表的第二页中。这是我的代码：

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>

我还指出了每个 Div 的唯一 ID 名称以及 class 名称。

这是我的 jsfiddle 的 link：https://jsfiddle.net/k3vin023/73phfh66/

Answer 1

当您谈论 "JQuery Accordion" 时，我假设您指的是 JQuery UI 手风琴小部件。如果是这样，则说明您没有正确设置它。

我无法改进他们页面上的示例 here。这是基本结构：

<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

请注意，每个手风琴 header 必须是一个 h3 元素，并且内容必须紧跟其 header 包裹在 div 元素中。您的标记中没有 h3 元素。

如果您将正确的结构放入 table，您需要做的就是在每个元素上调用 accordion() 方法来使其工作。我会让你参考文档了解详情。

Answer 2

在上一个 <tr> 中，<tr> 标签有问题。将最后的 <tr>....</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-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>

Answer 3

试一试：

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/

手风琴不显示数据表的第二页

Accordion not showing second page of Data Tables

javascript

php

jquery

accordion

laravel