javascript - 如何使用我自己的自定义下拉菜单控制 DataTables 生成的选择菜单?
问题描述
我有一个自动生成的包含四个选项的选择菜单,如下所示:
<div class="dataTables_length" id="table_length">
<label>
Show
<select name="table_length" aria-controls="table">
<option value="10">10 results</option>
<option value="15">15 results</option>
<option value="25">25 results</option>
<option value="-1">All results</option>
</select>
entries
</label>
</div>
我还有一个包含在 DataTables 区域之外的 div 元素,它具有我无法应用于 select 元素的所有样式,因为它是一个 select 元素:
<div id="dropdown-container">
<div id="dropdown">
<button id="dropdown-button"></button>
<div id="10-results" class="dropdown-item">
<p>
10 results
</p>
</div>
<div id="15-results">
<p>15 results</p>
</div>
<div id="25-results" class="dropdown-item">
<p>25 results</p>
</div>
<div id="all-results" class="dropdown-item">
<p>All results</p>
</div>
</div>
</div>
根据我的研究,我应该能够使用以下 jQuery 逻辑在单击时更改选择值:
$("#10-results").on("click", function(){
$('select').val( 10 );
});
但这似乎不起作用!
这是页面上唯一的选择元素,即使在向其中注入了一个独特的类之后,预期的结果 - 每个选项在单击其他元素时被激活,就好像该选项本身被单击一样 - 没有被看到。
不确定这是否是特定于 DataTables 的问题,但在没有可用替代选项的情况下包含非样式选择元素对我来说没有意义。
解决方案
page.len():此方法非常简单地用于获取和设置 DataTables 用于显示的分页长度。
因此,将您的点击事件处理程序更改为:
$("#10-results").on("click", function(){
$('#yourdatatableid').DataTable().page.len(10).draw();
});
$("#10-results").on("click", function(){
$('#yourdatatableid').DataTable().page.len(10).draw();
});
$('#yourdatatableid').DataTable({
"pageLength": 5,
"lengthMenu": [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div id="dropdown-container">
<div id="dropdown">
<button id="dropdown-button"></button>
<div id="10-results" class="dropdown-item">
<p>
10 results
</p>
</div>
<div id="15-results">
<p>15 results</p>
</div>
<div id="25-results" class="dropdown-item">
<p>25 results</p>
</div>
<div id="all-results" class="dropdown-item">
<p>All results</p>
</div>
</div>
</div>
<table id="yourdatatableid" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
推荐阅读
- html - 当一列变大时不要缩放其他列
- php - 未找到 Ajax 处理程序“onPagePosts”(10 月新手)
- zend-framework - 由于 000-default,Apache2 显示空白页面?
- python - 文字冒险游戏,攻击导致游戏崩溃
- android - androidStudio 中的“包 android.support.v7.app 不存在”错误
- javascript - 将 jquery 库下载到项目 Error:java: Illegal char <:> at index 4: http:\api.jquery.com
- python - 如何在firebase(python)上推送多个新对象
- python - Django url 找不到带有 HTML 文件的模板
- r - 如何修改我的代码以包含循环?
- c# - 启动 prog1.exe ,等到完全启动,然后启动 prog2.exe