jQuery 数据表渲染

Question

在我的 table 中，我有两个字段，它们是 0 或 1。一个是“活动的”，一个是“有效的”。

所以我添加了这段代码

"columnDefs": [ {

        "targets": 3,
        "data": "active",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green"></i>';}
          else
            { return '<i class="fas fa-times" style="color:red"></i>';}
        },

        
        "targets": 4,
        "data": "operative",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green"></i>';}
          else
            { return "";}
        }

  } ]

应该没问题。列号是正确的，但 table 仅呈现第 4 列。如果我删除第 4 列的定义，它会正确呈现第 3 列。

这里是有问题的位的屏幕截图：

这里是 table

的完整定义

<script type="text/javascript">

 $(function () {
 var table = $('.data-table').DataTable({
"iDisplayLength": 25,
"lengthMenu": [ [10, 25, 50,100,200, -1], [10, 25, 50,100,200, "All"] ],
    columnDefs: [
    {
        targets: -1,
        className: 'dt-right'
    }],
    processing: true,
    serverSide: true,
    ajax:"{{ route('AllUsersData') }}",
    columns: [
        
        {data: 'name', name: 'name'},
        {data: 'email', name: 'email'},
        {data: 'company',name: 'company'},
        {data: 'active', name:'active'},
        {data: 'operative', name: 'operative'},
        {data: 'superAdmin', name:'superAdmin'},
        {data: 'action', name: 'action', orderable: false, searchable: false},
    ],

     "columnDefs": [ {

        "targets": 3,
        "data": "active",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green"></i>';}
          else
            { return '<i class="fas fa-times" style="color:red"></i>';}
        },

        
        "targets": 4,
        "data": "operative",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green"></i>';}
          else
            { return "";}
        },

         "targets": 5,
        "data": "superAdmin",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green"></i>';}
          else
            { return "";}
        }


  } ]

    });
  });
</script>

这是 ajax 调用返回的数据示例：

Answer 1

一些观察：

1 - 您有 2 个单独的 columnDefs 部分 - 这些应该合并为一个 - 否则第一个包含 className: 'dt-right' 的部分将被忽略。

2 - 第二个较大的 columnDefs 部分缺少一些大括号。你的整体结构是这样的：

"columnDefs": [...]

其中，每个 targets 部分需要包含在它自己的 {...} 对象中：

    "columnDefs": [
      {
        targets: -1,
        className: 'dt-right'
      },     
      {
        "targets": 3,
        "data": "active",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green">x</i>';}
          else
            { return '<i class="fas fa-times" style="color:red">y</i>';}
        }
      },
      {
        "targets": 4,
        "data": "operative",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green">q</i>';}
          else
            { return "p";}
        }
      },
      {
        "targets": 5,
        "data": "superAdmin",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green">w</i>';}
          else
            { return "s";}
        }
      } 
    ]

3 - 我会小心使用 if(data == 1) 等语句。在这种情况下，data 的值是一个字符串，例如 "1" 或 "0"。所以你实际上是在说 if("1" == 1)。这将评估为 true...

...但是使用 if(data === "1") 会更安全 - 其中三等号不仅检查值而且检查数据类型。

我认为这应该可以解决您的问题 - 但这些问题背后可能隐藏着其他问题。如果是这样，这些可能需要后续问题。

jQuery 数据表渲染

jQuery Datatables rendering

jquery

render

datatables