向填充有数据表的现有表添加额外的列答案

【问题标题】：Add extra column to existing table populated with datatables向填充有数据表的现有表添加额外的列
【发布时间】：2021-02-25 08:00:14
【问题描述】：

我正在用数据表填充一个表。该表始终有四列。但我需要添加另一列，可以根据布尔值显示或隐藏。到目前为止我的代码：

{% show_extra_fields_button = show_extra_fields_bool %}

<table class="display" id="fields_datatable" class="fields_datatable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Place</th>
      <th>Email</th>
      <th>Phone</th>
      <th>Add Extra</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>


<script src="/static/js/vendor/datatables.min.js"></script>
<script>
  $(document).ready(function() {
    $("#fields_datatable").dataTable({
      ajax: {
      "processing": true,
      "dataSrc": "",
      url: 'app/personFields/',
      },
      "columns": [
        { "data": "name" },
        { "data": "place" },
        { "data": "email" },
        { "data": "phone" },
      ]
    })

    if (show_extra_fields_button) {
      $("#fields_datatable tr").each(function(){
         $(this).append("<td><button>Add Extra</button</td>");
      });
    }
  });
</script>

在这里，我想根据布尔值显示Add Extra 列。我想要使用 js 添加按钮的标题和列值。我该怎么做？

【问题讨论】：

标签： javascript html jquery datatables

【解决方案1】：

您可以使用数据表的内置功能。

要添加按钮列，您可以使用以下列定义：

{
    "data": null,
    "name": "buttonColumn",
    "render": function (data, type, row) {
        return '<button>Add Extra</button>';
    }
}

然后使用initComplete 回调在表格完全初始化、数据加载和绘制后设置列的可见性：

$("#fields_datatable").dataTable({
     ajax: {           
        type: "GET",
        contentType: "application/json; charset=utf-8",                        
        url: 'app/personFields/',
     },
     "columns": [
        { "data": "name" },
        { "data": "place" },
        { "data": "email" },
        { "data": "phone" },
        {
          "data": null,
          "name": "buttonColumn",
          "render": function (data, type, row) {
              return '<button>Add Extra</button>';
           }
        }
     ],
     "initComplete": function (settings, json) {
         // get instance of datatable
         table = settings.oInstance.api();                            
         // get column using its name and set visibility
         table.column('buttonColumn:name').visible(show_extra_fields_button);
     }
});

【讨论】：

【解决方案2】：

您可以输入- 而不是删除<td>，例如<td>-</td>

【讨论】：

【解决方案3】：

您可以像添加到表体一样添加到表头。

 if (show_extra_fields_button) {

    $('#fields_datatable thead tr').append('<th>Add Extra</th>')

  }

只执行一次。

【讨论】：

是的。知道了！我还必须将async: false 设置为数据表。无论如何我可以等待数据表加载然后附加它吗？
ajax 可以是一个函数。第二个参数是一个回调，您可以在其中附加标头。