首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >数据表中有图标的数据表中没有基于其他列的排序列

数据表中有图标的数据表中没有基于其他列的排序列
EN

Stack Overflow用户
提问于 2016-11-18 17:17:33
回答 1查看 1.4K关注 0票数 1

我有一个数据绑定值的datatable:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
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标记:中的字符串。

我做错了什么?

编辑!

代码语言:javascript
复制
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);

当列表应该是空的时候,所有的值都是"-“。

代码语言:javascript
复制
displayinfo.push({
                Vehicle: "-", Serial: "-", Power:"-", 
                Lock: "-"
            });
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-21 13:00:48

代码语言:javascript
复制
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/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40682679

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档