我在我的项目中使用datatable,并且过滤了顶部的列。过滤效果很好,但是列不能级联。有没有办法将信息从一列级联到另一列(取决于选择)。例如,如果在“名称”下选择Ashton考克斯,只有技术作者应突出显示在职位列下,弗朗西斯科应突出显示在办公室列下。下拉列表中的所有其他值应灰显。
以下是我目前所做的尝试。
下面是我的代码的链接-https://live.datatables.net/rajifejo/2/edit
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true,
searching: true
});
$('#dropdown1').on('change', function() {
table.columns(0).search(this.value).draw();
});
$('#dropdown2').on('change', function() {
table.columns(1).search(this.value).draw();
});
$('#dropdown3').on('change', function() {
table.columns(2).search(this.value).draw();
});
});
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<div class="searchbox">
<p>
Name:
<select id="dropdown1">
<option value="">Select</option>
<option>Ashton Cox</option>
<option>Brielle Williamson</option>
<option>Cedric Kelly</option>
</select>
</p>
<p>
Postion:
<select id="dropdown2">
<option value="">Select</option>
<option>Technical Author</option>
<option>Integration Specialist</option>
<option>Javascript Developer</option>
</select>
</p>
<p>
Office:
<select id="dropdown3">
<option value="">Select</option>
<option>San Francisco</option>
<option>New York</option>
<option>Edinburgh</option>
</select>
</p>
</div>
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>
<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>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$4,525</td>
</tr>
</tbody>
</table>
1条答案
按热度按时间9nvpjoqh1#
首先我创建了一个对象数组,每个对象都有一个人的信息。每次选择后,我循环通过数组找到正确的对象并将其数据保存在变量中。然后我循环通过其他下拉列表比较它们的文本和我拥有的数据,如果它们匹配,我给adisabled属性。* adisabled**attribute.