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

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次与此问题相关，另外一次只是更新语法。重要的两个变化是：

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

另一个不太相关的变化是：

bProcessing和bServerSide应为processing和serverSide。前者是DataTables选项的遗留格式，使用匈牙利语表示法，因为你没有columns的匈牙利表示法，你必须使用v1.10.x并不需要弃用符号

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

Answer 2

可能有点晚了，但实际上我遇到了同样的问题。这是一个用绿色Bootstrap刻度或红色Bootstrap十字架替换值“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>';}
      }
    });
  });
};

您所要做的就是：

在th table的{{1}}中精确确定哪些列应该包含特定类（如果它们包含布尔值）。例如，我使用head
使用以下两个参数调用该函数：
- 表格ID
- 函数应识别为boolean的类的名称

Answer 3

这是我的工作方式，它将查看所有列，如果看到正确，则将用正确的图标替换。

$(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
            },

        } ]

    } );
} );

渲染数据表布尔列

3 个答案: