包含图标的数据表,不根据其他列对列进行排序
Datatable with icons in it not sorting column based on other column
我有一个带有数据绑定值的数据表:
<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 }
]
});
当我第一次加载数据表时,它有不止一行,但是当我按下"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: "-"
});
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;
}
}]
});
好的,以上您只需要一个空的表元素。 您应该不再需要在 HTML 中指定"thead"或"tbody",插件将自动创建它们。 我将 Lock 和 Lock2 列绑定到同一个数据项,因此对任一列的排序将根据数字"Lock"值进行排序,因为我在 columnDef 选项中指定了自定义渲染器。
我对此进行了盲码编码,但希望它开箱即用。
另请注意,我将选项参数从旧定义更改为当前的 1.10 定义。 大多数旧参数名称已弃用,因此使用起来不安全,除非您希望在将来的版本中遇到麻烦。
让我知道这是否可行。
编辑:抱歉忘记添加数据绑定。 参考:https://datatables.net/manual/data/
相关文章:
- 转到其他 URL 后,如何保持排序的骨干.js集合
- 将 json 数组的一部分分别排序到同一数组的其他部分
- 是否可以在JqGrid中按字母顺序以外的其他方式对组进行排序
- 通过javascript和php动态排序表以及其他一些选择标准
- 按子值排序并检索其他子值
- 如何附加列表项<李>从无序列表<ul>其他四个未排序列表之间
- 如何将可排序元素拖动到其他可排序元素中
- Javascript数组排序将字符串MAG250放在底部,其他项目放在ASC顶部
- 包含图标的数据表,不根据其他列对列进行排序
- MongoDb在其他Collection中按计数排序Collection
- 如何排序教科书的类型,颜色代码,或分类在bookweb使用html, Javascript, CSS或其他
- 排序李的位置时,其他李展开
- 如何在重新排序表行时将移动的其他行动画化
- 为什么Javascript实现的冒泡排序比其他排序算法快得多
- 如何将Firebase子元素中的值与其他元素排序
- Safari不像其他浏览器那样对对象数组进行排序
- 如何对谷歌图表数据表进行排序,并将排序扩展到其他列
- jQuery可排序的拖放-克隆和其他问题
- 主干日期+其他参数排序
- 在不影响其他对象的情况下重新排序对象