Add extra column to existing table populated with datatables

Question

I am populating a table with datatables. The table has four columns always. But I need to add another column which can be shown or hidden based on boolean value. My code so far:

{% 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>

Here I would want to show the Add Extra column based on the boolean value. I want the header and the column values which will be buttons to be added using js. How can I do that?

Answer 1

You can use data tables built-in functionality.

To add a button column you can use the following column definition:

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

Then use initComplete callback to set the columns' visibility once table has fully been initialised, data loaded and drawn:

$("#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);
     }
});       

Answer 2

You can put - instead of deleting that <td> for example <td>-</td>

Answer 3

You can add to the table header just the same way you are adding to the table body.

 if (show_extra_fields_button) {

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

  } 

Execute it just one time.