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

I'm working on my project and it seems like the jQuery Accordion is not showing in second page of data tables. 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/

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

3条回答默认最新

duandiaoqian5795 2016-07-26 05:35

关注

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/

本回答被题主选为最佳回答 , 对您是否有帮助呢?

查看更多回答(2条)

报告相同问题？

关注问题

手风琴没有显示数据表的第二页 javascript jquery laravel php
2016-07-26 05:19

回答 3 已采纳 Try it: Javascript: function showNext($this) { $this.next().slideToggle('fast'); } $(document).
使用制表符和手风琴显示结果 html mysql php sql
2018-08-15 22:31

回答 1 已采纳 Instead of using $results = $results->fetchAll(); you can fetch the rows one at a time and grou
小程序 手风琴折叠面板样式问题？ css 前端微信小程序有问必答
2021-12-10 14:05

回答 1 已采纳左边的线和内容块分块，和快递查询那种效果一样 <style> .expressdetail{padding-left:15px} .expressdetail li{list-
elment-ui表格展示数据手风琴效果实现
2022-07-18 15:30

玉之之的博客只能展开一行，不能同时展开两行，因为数据量较多的情况下,一次性包括子列表的数据查...而第二次查询的tableDataDetail中，如果两个数据展开，则最后一次展开的会覆盖前面所有的数据。其中table所需要设置数据为。...
如何在Jquery中制作一个用MySQL数据库显示数据的手风琴？ jquery mysql php
2013-06-15 17:25

回答 4 已采纳 You can do something like this. $names = ['alex', 'adam', 'bob', 'bryan']; asort($names); // The
Bootstrap手风琴扩展全部 php sql
2019-07-04 13:19

回答 1 已采纳 This is what worked for me in the end: function expand_all(){ $('.collapse').each(function(){
bootstrap手风琴折叠问题 bootstrap
2021-03-08 10:18

回答 2 已采纳
element-ui手风琴自定义html,使用element-ui table expand展开行实现手风琴效果
2021-06-16 07:09

冷酷CV战士的博客写这篇博客的初衷：官网演示效果为点击toggle，已经展开的项不会因为其他项展开而关闭，所以延伸了下，扩展为手风琴效果。效果前瞻：先删减一下代码：查看详情{{ props.row.name }}export default {data() {return {...
wayfinder打印类作为手风琴的内容 php
2018-07-21 11:40

回答 1 已采纳 I was missing the :or operator so, for some strange reason wayfinder was printing the condition as
基于case语句动态打开手风琴 html javascript jquery php
2017-01-17 09:47

回答 1 已采纳 You are trying to bypass using accordion to make its selections and overriding it with styles. Tha
使PHP适应CSS手风琴 css html php
2014-02-12 23:17

回答 1 已采纳 i'm not sure i get what you're trying to do... but you can tweak the php output to this and get pr
css3制作手风琴,一步步教你css3手风琴效果的实现
2021-08-03 21:27

梦酱酱酱酱肉大包子的博客那么在鼠标来回移动的过程中，画面正常显示的效果类似我们的手风琴，所以叫手风琴效果。手风琴效果的实现把图片显示出来通过上面的效果，我们不难发现，首先所有照片的集合是一个有1px边框的div盒子，盒子里面有一组...
jquery手风琴不起作用 php
2013-07-27 10:10

回答 1 已采纳 All jQuery UI plugins maintain state, such as the current option values, whether the plugin is ena
VUE手动实现手风琴折叠面板，不用组件
2020-09-16 17:31

web小奶精的博客 vue手动实现手风琴折叠面板；实现根据折叠与展开的图标动态变化；如何只显示一个列表，其他列表都关闭；怎么操作类名改变样式；折叠面板没有渲染； vue没有检测到数组变化
layui动态生成的手风琴实现默认第一个展开+鼠标悬浮展开
2020-03-28 13:43

web小奶精的博客首先，我是从数据库提取数据，在前端用foreach循环展示，但是，循环出来的都是统一样式，要不都是展开，要不都是折叠。全部折叠： <div class="layui-colla-content"> <div class="layui-collapse" ...
原生小程序实现手风琴
2022-10-18 09:26

请叫我欧皇i的博客本文主要讲述用原生实现手风琴效果，并且默认展开第一个，点击其他的第一个折叠，其他同理，永远只会显示一条数据的展开，使用到了iconfont的图标，原生不会引入的请看。手风琴教程到此结束，希望对你有所帮助~
react taro 多级手风琴 taro踩坑
2021-12-17 11:55

lullre的博客也就是常见的折叠面板也叫手风琴 当时想的是我能不能用这个做出那种多级联动的效果这个是文档自带的效果接下来是实现过程控制每一级下每个手风琴展开 const [idx1,setidx1]=useState<number>(-1);.....
超大量数据，前端树形结构展示
2023-12-22 16:30

是茜茜啊啊的博客由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个...
经验 - 组件实现思路在实战中的应用：collapse 折叠面板的手风琴效果
2023-08-02 02:08

下雪天的夏风的博客经验 - element-plus 组件 collapse 折叠面板的手风琴效果，实现思路在实战中的应用
没有解决我的问题, 去提问

悬赏问题

¥15 公交车和无人机协同运输
¥15 stm32代码移植没反应
¥15 matlab基于pde算法图像修复，为什么只能对示例图像有效
¥100 连续两帧图像高速减法
¥15 组策略中的计算机配置策略无法下发
¥15 如何绘制动力学系统的相图
¥15 对接wps接口实现获取元数据
¥20 给自己本科IT专业毕业的妹m找个实习工作
¥15 用友U8：向一个无法连接的网络尝试了一个套接字操作，如何解决？
¥30 我的代码按理说完成了模型的搭建、训练、验证测试等工作(标签-网络|关键词-变化检测)

码龄粉丝数原力等级 --

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

3条回答默认最新

码龄粉丝数原力等级 --

悬赏问题

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

3条回答 默认 最新

悬赏问题

3条回答默认最新