渲染数据表布尔列

Question

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

我有一些布尔列，我想将其呈现为图标，例如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
                      }
                  ]

    } );
} );

谢谢

Answer 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
            },

        } ]

    } );
} );

Answer 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
  • 函数应识别为布尔值的类的名称

Answer 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 之后缺少逗号，这可以解释这一点。