我正在尝试使用jquery.dataTables.columnFilter.js在DataTable中添加ColumnFilter,它成功生成了Filter。但是当我在表格中添加tfoot
colspan时,它无效。
---------------------------------------------------------
ID | Name | Marks | Result |
---------------------------------------------------------
1 | A | 100 | Pass |
1 | B | 90 | Pass |
1 | C | 80 | Pass |
1 | D | 100 | Pass |
1 | E | 70 | Pass |
1 | F | 59 | Pass |
---------------------------------------------------------
Total | 580 | |
---------------------------------------------------------
实际上我想要以上类型的表但是当我把Tfoot放在ColSpan时它没有把Filter放在Result表上。 我的代码如下: -
HTML
<div class="form-group col-md-3">
<label for="bragSection">Name</label>
<div id="name"></div>
</div>
<div class="form-group col-md-3">
<label for="bragSection">Result</label>
<div id="result"></div>
</div>
<table id="show_countries_currencies" class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Marks</th>
<th>Result</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2" style="text-align:right"></th>
<th></th>
</tr>
</tfoot>
</table>
JAVASCRIPT
$(document).ready(function() {
dTable = $('#show_countries_currencies').dataTable({
"oLanguage": {
"sLengthMenu": "Display _MENU_ Records",
"sZeroRecords": "<center>No Record Found!</center>",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ Records",
"sInfoEmpty": "Showing 0 to 0 of 0 Records",
"sInfoFiltered": "(filtered from _MAX_ total Records)",
},
"columns": [{
"width": "5%"
}, {
"width": "5%"
}, {
"width": "5%"
}],
bstateSave: true,
responsive: true,
bJQueryUI: false,
bProcessing: true,
bServerSide: true,
sSearch: false,
bFilter: true,
iDisplayLength: 10,
sAjaxSource: "get_result.php",
aoColumns: [{
"sName": "id",
"bSearchable": false,
"bSortable": true,
"className": "text-center tableIcon"
}, {
"sName": "name",
"bSearchable": true,
"bSortable": true,
"className": "text-center tableIcon"
}, {
"sName": "result",
"bSearchable": true,
"bSortable": true,
"className": "text-center tableIcon"
}],
aaSorting: [
[0, 'desc']
]
});
$('#show_countries_currencies').dataTable().columnFilter({
sRangeFormat: "<label class='dateRange1'>From</label> {from} <label class='dateRange2'>To</label> {to}",
aoColumns: [null,{
type: "text",
sSelector : "#name"
},{
type: "select",
sSelector: "#result",
values: ["Pass","Fail"]
}]
});
});