Javascript 手风琴不显示数据表的第二页
我正在做我的项目，似乎jQuery手风琴没有显示在数据表的第二页中。这是我的密码： Jquery：Javascript 手风琴不显示数据表的第二页,javascript,php,jquery,laravel,accordion,Javascript,Php,Jquery,Laravel,Accordion,我正在做我的项目，似乎jQuery手风琴没有显示在数据表的第二页中。这是我的密码： Jquery： $(document).ready(function() { $('#myTable').DataTable( { "pageLength": 5 } ); for (var x = 1; x <= 10 ; x++) { $('#accordion_' + x).find('.accordiontoggle-' + x).click(function () {
$(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');
});
}
} );
$（文档）.ready（函数（）{
$（'#myTable'）。数据表（{
“页面长度”：5
} );
对于（var x=1；x当您谈到“jqueryaccordion”时，我假设您指的是jqueryui Accordion小部件。如果是这样，那么您没有正确设置它
我无法改进他们页面上的示例。这是基本结构：
<div id="accordion">
<h3>First header</h3>
<div>First content panel</div>
<h3>Second header</h3>
<div>Second content panel</div>
</div>
第一个标题
第一个内容面板
第二个标题
第二内容面板
请注意，每个accordion头必须是h3
元素，并且内容必须立即包装在头后面的div
元素中。标记中没有h3
元素
如果您将适当的结构放入表中，则只需对每个元素调用accordio（）
方法即可。有关详细信息，我将参考文档。在last
中，
标记有问题。请将last…
替换为以下内容
编辑说明：顺便说一句，它很有效
<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>
10
样本10
1990年1月1日
项目+2更多
- 项目1
- 项目2
- 项目3
1
打开
试试看：
Javascript:
function showNext($this) {
$this.next().slideToggle('fast');
}
$(document).ready(function () {
$('#myTable').DataTable({
"pageLength": 5
});
});
<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>
HTML:
function showNext($this) {
$this.next().slideToggle('fast');
}
$(document).ready(function () {
$('#myTable').DataTable({
"pageLength": 5
});
});
<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>
PO#
厂商名称
订购日期
项目
总金额
地位
1.
样本1
1990年1月1日
Item+我已经看过了。嗯，当我将你的小提琴复制并粘贴到我的小提琴上时，它不起作用：（将加载类型更改为“无包裹-”