英文:
Useing multi-column JQuery filter and Checkbox selection with multi-select option together
问题
我尝试同时使用两个 JQuery 数据表功能。
1) 每行前面的复选框，带有多选选项。
https://datatables.net/extensions/select/examples/initialisation/checkbox.html。和
2) 多列过滤和搜索，如下例所示。
https://datatables.net/examples/api/multi_filter.html
我将这两个代码段合并在一起，但它不起作用。可能出了什么问题？
```$(document).ready(function () {
// 设置 - 在每个页脚单元格中添加文本输入
$('#example tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// 数据表
var table = $('#example').DataTable({
initComplete: function () {
// 应用搜索
this.api()
.columns()
.every(function () {
var that = this;
$('input', this.footer()).on('keyup change clear', function () {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
},
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
} );
} );
});
});
英文:
I am trying to use two features from JQuery datatable together.
- checkbox infront of each row with multi-select option
https://datatables.net/extensions/select/examples/initialisation/checkbox.html. and - multi-column filter and search as in below example
https://datatables.net/examples/api/multi_filter.html
I added both the codes together but it is not working. What could be wrong here?
// Setup - add a text input to each footer cell
$('#example tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $('#example').DataTable({
initComplete: function () {
// Apply the search
this.api()
.columns()
.every(function () {
var that = this;
$('input', this.footer()).on('keyup change clear', function () {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
},
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
} );
} );
});
});
</details>
# 答案1
**得分**: 1
问题出在你将这两个功能组合在一起的方式上。根据你的 JavaScript 代码，它会作为一个独立的功能，因为你初始化了数据表两次，即 `$('#example')..`。
***演示代码***:
```js
$(document).ready(function() {
// 排除第一列，因为它是复选框列
$('#example tfoot th:not(:first)').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="搜索 ' + title + '" />');
});
$('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [
[1, 'asc']
],
initComplete: function() { // 只在这里添加搜索部分
// 应用搜索
this.api()
.columns()
.every(function() {
var that = this;
$('input', this.footer()).on('keyup change clear', function() {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
}
});
});
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.6.0/css/select.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.6.0/js/dataTables.select.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>职位</th>
<th>办公室</th>
<th>年龄</th>
<th>薪水</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>系统架构师</td>
<td>爱丁堡</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>会计</td>
<td>东京</td>
<td>63</td>
<td>$170,750</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td>初级技术作者</td>
<td>旧金山</td>
<td>66</td>
<td>$86,000</td>
</tr>
<tr>
<td></td>
<td>Ashton XYX</td>
<td>初级作者</td>
<td>美国</td>
<td>60</td>
<td>$87,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>姓名</th>
<th>职位</th>
<th>年龄</th>
<th>入职日期</th>
<th>薪水</th>
</tr>
</tfoot>
</table>
英文:
Issue is in the way you have combine both the feature together.Currently according to your js code it acts as a separate feature because you are initializing your datatable twice i.e: $('#example')..
Demo Code :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(document).ready(function() {
//excluding the first column its for checkbox.. so
$('#example tfoot th:not(:first)').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
$('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [
[1, 'asc']
],
initComplete: function() { //add here only the search part
// Apply the search
this.api()
.columns()
.every(function() {
var that = this;
$('input', this.footer()).on('keyup change clear', function() {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
}
});
});
<!-- language: lang-css -->
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.6.0/css/select.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.6.0/js/dataTables.select.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>$170,750</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>$86,000</td>
</tr>
<tr>
<td></td>
<td>Ashton XYX</td>
<td>JuniorAuthor</td>
<td>US</td>
<td>60</td>
<td>$87,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论