我想使用复选框来过滤数据表,但我不知道该怎么做。数据格式为json。
我只想过滤大于 27 的温度,例如通过单击复选框。
var data = [
{temperature: 20, date: "01/07/2018"},
{temperature: 27, date: '02/07/2018'},
{temperature: 25, date: '03/07/2018'},
{temperature: 27, date: '04/07/2018'},
{temperature: 23, date: '05/07/2018'},
{temperature: 24, date: '06/07/2018'},
{temperature: 23.5, date: '07/07/2018'},
{temperature: 27, date: '08/07/2018'},
{temperature: 30, date: '09/07/2018'},
{temperature: 28, date: '10/07/2018'},
{temperature: 27, date: '11/07/2018'},
{temperature: 28.1, date: '12/07/2018'},
{temperature: 26, date: '13/07/2018'},
{temperature: 22, date: '14/07/2018'}
]
var table = null
$(document).ready( function(){
fillTable()
} )
function fillTable() {
var line = ""
$.each(data, (i, j) => {
line += "<tr>"+
" <td>"+j.temperature+"</td>"+
" <td>"+j.date+"</td>"+
"</tr>"
})
var tbody = $('.tbodyTemp')
tbody.find('tr').remove()
tbody.append( line )
paggingTable()
}
var paggingTable = () => {
table = $('#example2').DataTable()
}
$('#maxTemp27').on('change', function () {
if( $(this).is(':checked') ){
// console.log( 'Está checado' )
$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
var checked = $('#checkbox').is(':checked');
if (checked && aData[4] > 27) {
return true;
}
if (!checked && aData[4] < 27) {
return true;
}
return false;
});
table.draw()
}else{
table.draw()
// console.log( 'Não está checado' )
}
})
<label>
<input type="checkbox" id="maxTemp27"> Bigger then 27
</label>
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>Temperature</th>
<th>Date</th>
</tr>
</thead>
<tbody class="tbodyTemp">
</tbody>
<tfoot>
<tr>
<th>Temperature</th>
<th>Date</th>
</tr>
</tfoot>
</table>
我已经尝试过这个答案 here ,但它不起作用。
最佳答案
首先,为什么不使用 data
选项而不是手动构建标记?
var table = $('#example').DataTable({
data: data,
columns: [
{ data: 'temperature', title: 'temperature' },
{ data: 'date', title: 'date' }
]
})
...更快且更易于维护。您可以在空 <table>
上执行此操作元素并添加 <tfoot>
如果你愿意的话(也可以手动输入<thead>
)。
第二我相信$.fn.dataTableExt.afnFiltering
是遗留代码,即 1.10.x 之前的旧方法。它仍然可以向后兼容,但“现代”自定义过滤器数组称为 $.fn.dataTable.ext.search
。不过,这里的问题是使用了错误的索引和一些不合逻辑的逻辑。改为执行此操作:
$('#maxTemp27').on('change', function() {
if ($(this).is(':checked')) {
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return data[0] > 27
}
)
} else {
$.fn.dataTable.ext.search.pop()
}
table.draw()
})
您不必多次检查检查(您已经知道了),或返回不同的值 - 只需将值作为表达式比较一次,并使用正确的索引。如果未选中该复选框,请使用 pop()
删除过滤器。 。
在这里查看它的工作情况 -> http://jsfiddle.net/zyhvxc65/
关于jquery - 使用复选框过滤数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51562742/