我有一个数据绑定值的datatable:
<table class="table" style="width: 100%;" id="TableC">
<thead>
<tr>
<th>Vehicle</th>
<th>Serial</th>
<th>Power</th>
<th>Lock</th>
<th>Lock2</th>
</tr>
</thead>
<tbody data-bind="foreach: techlist">
<tr>
<td data-bind="text: Vehicle">Vehicle</td>
<td data-bind="text: Serial">Serial</td>
<td data-bind="text: Power">Power</td>
<td>
<span data-bind="visible: $data.Lock==0" style="font-size:75%" class="fa-stack fa-lg"><i class="fa fa-unlock fa-stack-2x" style="color:#71BF3D"></i></span>
<span data-bind="visible: $data.Lock==1" style="font-size:75%" class="fa-stack fa-lg"><i class="fa fa-lock fa-stack-2x" style="color:#E74C3C"></i></span>
<span data-bind="visible:$data.Lock=='-'">-</span>
</td>
<td data-bind="text: Lock"></td>
</tr>
</tbody>
</table>以及它的.js:
TableC = $("#TableC").DataTable({
bSortable: true,
bPaginate: false,
//"searching": false,
"info": false,
"bFilter": false,
"aoColumnDefs": [
{ targets: 0 },
{ targets: 1 },
{ targets: 2 },
{ targets: 3, orderData: 4 },
{ bSearchable: false, targets: 4 }
]
});当我第一次加载datatable时,它有多个行,但是当我按下'Lock‘列的筛选器时,它应该根据列'Lock2’过滤图标,而是显示一行,同时显示图标和"-“符号以及'Lock2‘符号和值,其他字段中填充td标记:中的字符串。
我做错了什么?
编辑!
var displayinfo = [];
displayinfo.push({
Vehicle: "05", Serial: "925", Power:"30V",
Lock: 1
});
displayinfo.push({
Vehicle: "06", Serial: "937", Power:"60V",
Lock: 0
});
displayinfo.push({
Vehicle: "07", Serial: "835", Power:"50V",
Lock: 1
});
techstatuslist(displayinfo);当列表应该是空的时候,所有的值都是"-“。
displayinfo.push({
Vehicle: "-", Serial: "-", Power:"-",
Lock: "-"
});发布于 2016-11-21 13:00:48
var displayinfo = [];
displayinfo.push({
Vehicle: "05", Serial: "925", Power:"30V",
Lock: 1
});
displayinfo.push({
Vehicle: "06", Serial: "937", Power:"60V",
Lock: 0
});
displayinfo.push({
Vehicle: "07", Serial: "835", Power:"50V",
Lock: 1
});
TableC = $("#TableC").DataTable({
data: displayInfo,
ordering: true,
paging: false,
//"searching": false,
"info": false,
"searching": false,
columns: [
{ data: "Vehicle", title: "Vehicle" },
{ data: "Serial", title: "Serial" },
{ data: "Power", title: "Power" },
{ data: "Lock", title: "Lock" },
{ data: "Lock", title: "Lock2" }
],
"columnDefs": [ {
"targets": 3,
"render": function ( data, type, full, meta ) {
// If it is rendering the cell contents
if(type === 'display') {
switch(data) {
case 0:
return '<span style="font-size:75%" class="fa-stack fa-lg"><i class="fa fa-unlock fa-stack-2x" style="color:#71BF3D"></i></span>';
case 1:
return '<span style="font-size:75%" class="fa-stack fa-lg"><i class="fa fa-lock fa-stack-2x" style="color:#E74C3C"></i></span>';
default:
return '<span>-</span>';
}
}
// Your code implies that lock could be a number or a string ('-')
// So checking it first to see if we can convert it. If not then
// assign -1 as our numeric value. If we can convert it to a
// numeric value for sorting and filtering.
return (isNaN(data)) ? -1 : +data;
}
},
{
"targets": 4,
"render": function ( data, type, full, meta ) {
// If it is rendering the cell contents
if(type === 'display') {
return data;
}
// Your code implies that lock could be a number or a string ('-')
// So checking it first to see if we can convert it. If not then
// assign -1 as our numeric value. If we can convert it to a
// numeric value for sorting and filtering.
return (isNaN(data)) ? -1 : +data;
}
}]
});好的,上面所需要的就是一个空表元素。您不应该再需要指定一个“头”或"tbody“的HTML插件将自动创建这些。我将Lock和Lock2列绑定到相同的数据项上,因此对这两列的排序将基于数值"Lock“值进行排序,因为我在columnDef选项中指定了一个自定义呈现程序。
我把这封信编了个密码,所以希望它能从盒子里出来。
还请注意,我将选项参数从遗留定义更改为当前的1.10定义。大多数遗留参数名称都不推荐使用,因此除非您希望在未来的版本中遇到麻烦,否则使用起来是不安全的。
如果这件事成功了请告诉我。
编辑:对不起,忘了添加数据绑定。参考资料:https://datatables.net/manual/data/
https://stackoverflow.com/questions/40682679
复制相似问题