手風琴不顯示數據表

-1

我的工作我的項目的第二頁，它看起來像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>

我也表示每格一個唯一的ID名，也爲它的類名。

這裏是鏈接，我的jsfiddle：https://jsfiddle.net/k3vin023/73phfh66/

來源

2016-07-26 kevin_marcus

試試：

的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/

來源

2016-07-26 05:35:15 rad11

它說，showNext是不確定的。 –

看看jsfiddle我編輯答案 – rad11

我已經看了。 hmmmmm當我複製你的小提琴粘貼到我的小提琴，它沒有工作:(https://jsfiddle.net/k3vin023/gjr6a5gq/ –

當你談論的「JQuery的手風琴」我想你指的是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>

注意，每個手風琴頭必須是一個h3元素，含量必須包裝在div元件立即其標題之後。您的標記中沒有h3元素。

如果你把正確的結構到表中，所有你需要做的，使它的工作是呼籲每個元素的accordion()方法。我會告訴你詳細的文檔。

來源

2016-07-26 05:34:03 BobRodes

在最後<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>

來源

2016-07-26 05:34:54

手風琴不顯示數據表

回答

相關問題