渲染数据表布尔列

Posted 2023-02-24

【中文标题】渲染数据表布尔列

【英文标题】：Render Datatables Boolean Column

【发布时间】：2016-11-09 18:02:25

【问题描述】：

我有数据表使用服务器端处理返回数据。我没有修改数据表中给出的基本示例。

我有一些布尔列，我想将其呈现为图标，例如1 = 绿色勾号 0 = 红十字或类似的东西。它目前看起来像this。 我将如何只渲染 3 列？

这是代码，我试过了，但这会导致整个表格为空白...

    $(document).ready(function() 
    $('#log').dataTable( 
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "assetlog.php"
    "columns": [
           "data": "id" ,
            "data": "assetcode" ,
            "data": "name",
            "data": "shift" 
            "data": "datetime" ,
            "data": "stop_production" ,
            "data": "furtheractions" 
            "data": "jobcomplete" ,
            "data": "duration" ,
           ],
           "columnDefs": [
                      
                          "render": function (data, type, row) 
                              return (data === true) ? '<span class="glyphicon glyphicon-ok"></span>' : '<span class="glyphicon glyphicon-remove"></span>';
                          ,
                          "targets": 6
                      
                  ]

     );
 );

谢谢

【问题讨论】：

把你试过的一些代码..

查看此链接：***.com/questions/658044/tick-symbol-in-html-xhtml

如果可能的话，提供一些样本code 加上回复data...

您可以为查询中的图标创建标记 (HTML)。

您好，我已经添加了我尝试过的代码。不幸的是，一旦我使用“列”定义，它什么也不返回......

【参考方案1】：

这是我的做法，它会查看所有列，如果它是真的，你将替换为正确的图标。

$(document).ready(function() 
    $('#table_detail').DataTable( 
        data: json_detail.data,
        columns: json_detail.headers,
        columnDefs : [ 
          "targets": "_all",
            "render": function ( data, type, row ) 
                if (data === true) 
                    data = '<img src="/static/rapport/images/icon-yes.gif">';
                
                else if (data === true) 
                    data = '<img src="/static/rapport/images/icon-yes.gif">';
                
                return data
            ,

         ]

     );
 );

【参考方案2】：

可能有点晚了，但我实际上遇到了同样的问题。这是一个用绿色引导刻度或红色引导交叉替换值“1”和“0”的短代码：

function remplacerBool(tableauID, boolClass) 
  $(tableauID + ' tr').each(function (i, row) 
    $('td', this).each(function (j, cell) 
      if ($(tableauID + ' th').eq(j).hasClass( boolClass )) 
        if (cell.innerHTML == '1') cell.innerHTML = '<div class="text-center text-success"><span class="glyphicon glyphicon-ok-circle"></span></div>';
        if (cell.innerHTML == '0') cell.innerHTML = '<div class="text-center text-danger"><span class="glyphicon glyphicon-remove-circle"></span></div>';
      
    );
  );
;

你所要做的就是：

在tablehead 的th 中精确指出如果它们包含布尔值，哪些列应该获得特定的类。比如我用<th class='bool'> 使用以下两个参数调用函数： 表 ID 函数应识别为布尔值的类的名称

【讨论】：

这不是正确的做法，columns.render 更适合这个。您的解决方案仅适用于当前在 DOM 中的元素（仅限当前页面）。另外不建议直接操作单元格内容，每个用例都有API 方法可用。

我不同意。我使用 express 动态生成我的表格并使用 pug 进行渲染，并且在 dataTables 选项中精确“渲染”比我的方法复杂得多。这两种方法都很好，我认为每个面临同样问题的人都应该意识到它们，并根据自己的情况明智地选择。此外，我的方法甚至适用于不使用 dataTables 的表。

【参考方案3】：

columns 和 columnDefs 是多余的；也就是说，您当前添加到 columnDefs 的内容应该在您的 columns 中添加您想要勾选的内容。它应该是这样的：

/*Note that I'm assuming you're using DT 1.10.x, so the 'b' in front of boolean options
 *is unnecessary, if you aren't using 1.10.x then go ahead and put those back in.*/
 $(document).ready(function() 
    $('#log').dataTable( 
        "processing": true,
        "serverSide": true,
        "ajaxSource": "assetlog.php"
        "columns": [
            "data": "id" ,
            "data": "assetcode" ,
            "data": "name",
            "data": "shift" ,
            "data": "datetime" ,
           /*Note that data == true instead of ===, if you have 1 or 0 it isn't ===
           (strictly equal) to true but it is == (evaluates to equal) to true*/
            "data": "stop_production",
             "render": function (data, type, row) 
                          return (data === true) ? '<span class="glyphicon glyphicon-ok">
                          </span>' : '<span class="glyphicon glyphicon-remove"></span>';
           ,
            "data": "furtheractions",
             "render": function (data, type, row) 
                          return (data == true) ? '<span class="glyphicon glyphicon-ok">
                          </span>' : '<span class="glyphicon glyphicon-remove"></span>';
           ,
            "data": "jobcomplete",
             "render": function (data, type, row) 
                          return (data == true) ? '<span class="glyphicon glyphicon-ok">
                          </span>' : '<span class="glyphicon glyphicon-remove"></span>';
           ,
            "data": "duration" 
       ]
     );
 );

我对您的代码进行了 3 处更改，其中 2 处与此问题相关，一处仅用于更新语法。重要的 2 个变化是：

将render 函数移动到您希望具有此行为的每一列中，而不是仅仅将它放在冗余的columnDefs 中 将 data === true 更改为 data == true，因为 1 不是 === true 但它是 == true（=== 用于考虑类型的严格比较）

一个不太相关的变化是：

bProcessing 和 bServerSide 应该是 processing 和 serverSide。前者是 DataTables 选项的旧格式，它使用匈牙利表示法，由于您没有 columns 的匈牙利表示法，因此您必须使用 v1.10.x，它不需要那种已弃用的表示法。

注意：您还提到，添加 columns 选项后会出现空白页，但您似乎在 data: shift 之后缺少逗号，这可以解释这一点。

【讨论】：

您好，使用这个我仍然得到一个空白页。不过，您所做的更改是有道理的！谢谢 :-) 我在控制台中得到了这个输出。意外的字符串文字“列”。期望 '' 结束一个对象字面量。

好的，我用一些缺失的语法修复了这个问题。现在带有图标的列都返回 null 或 undefined..

如果列值实际上是 1 或 0，我会考虑尝试将 return (data == true) 更改为 `return (data === 1) 并查看是否有任何改变。