如何解决如何在 DataTables 中的表内选择元素使用搜索?
在我的表格中,我在选择元素中预填了表单数据。有没有办法允许搜索方法 - 单个列搜索(选择输入)和常规表搜索仅包括预填充(选定)项目?我不太关心多选元素,只关心下拉元素。
数据表:
<table id="waiting" class="display">
<thead>
<tr>
<th>Name</th>
<th class="locations">Location</th>
<th>Roles</th>
<th>Registration Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr class="user">
<td>User 1</td>
<td>
<select name="location-1" class="locations-list">
<option value="CHI">Chicago</option>
<option value="DC">DC</option>
<option value="LA">LA</option>
<option value="NYC">NY</option>
<option selected value="WC">WC</option>
</select>
</td>
<td>
<select name="role-1" class="roles-list" multiple required>
<option value="MAN">Manager</option>
<option selected value="INS">Insurance</option>
<option value="OFF">Office</option>
</select>
</td>
<td>Feb. 19,2021</td>
<td>
<button type="submit" class="btn btn-primary" name="submit" value="activation-1">Deactivate</button>
</td>
</tr>
<tr class="user">
<td>User 2</td>
<td>
<select name="location-6" class="locations-list">
<option value="CHI">Chicago</option>
<option value="DC">DC</option>
<option value="LA">LA</option>
<option value="NYC">NY</option>
<option value="WC">WC</option>
</select>
</td>
<td>
<select name="role-6" class="roles-list" multiple required>
<option selected value="MAN">Insurance</option>
<option value="INS">Instructor</option>
<option selected value="OFF">Office</option>
</select>
</td>
<td>Feb. 11,2021</td>
<td>
<button type="submit" class="btn btn-primary" name="submit" value="activation-6">Deactivate</button>
</td>
</tr>
</tbody>
</table>
当前的 js - 它几乎直接从 DataTables example 中提取:
$(document).ready(function() {
$('#waiting').DataTable( {
columnDefs: [
{ orderable: false,targets: [2,4] }
],"order": [[ 3,"asc" ],[1,"asc"]],initComplete: function () {
$('#waiting tbody tr td.dataTables_empty')
$(this).children('tbody').children('tr').children('td.dataTables_empty')
if (! $('#waiting tbody tr td.dataTables_empty').length) {
this.api().columns(cols).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.header()) )
.on( 'change',function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '',true,false )
.draw();
});
column.data().unique().sort().each( function ( d,j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
});
});
} else {
$('#waiting tfoot').remove();
};
}
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。