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

如何解决向填充有数据表的现有表添加额外的列

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

{% 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 添加的按钮。我该怎么做？

解决方法

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

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

{
    "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,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);
     }
});

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

您可以像添加到表格正文一样添加到表格标题中。

 if (show_extra_fields_button) {

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

  }

只执行一次。