title: How to add buttons to each row of a datatable?
body: <pre><code>$(document).ready(function() {
      var table = $('#example').DataTable({
          "columns": [
              { "data": "id" },
              { "data": "itemID" },
              { "data": "imagePath" },
              {
                  "className":      'details-control',
                  "orderable":      false,
                  "data":           null,
                  "defaultContent": ''
              },
              { "data": "icon" },
              { "data": "reporter" },
              { "data": "title" },
              { "data": "dateUploaded" },
              { "data": "dateReported" },
              { "data": "reportedReason" },
              { "data": "description" },
              { "data": "problem" },
              { "data": "numReports" },
              { "data": "deleteImage" } 
          ],
          "columnDefs": 
          [
              { 
                  "targets": 0,
                  "visible": false
              }, 
              {
                  "targets": 1,
                   "visible": false    
              },
              {
                  "targets": 2,
                  "visible": false
              },
              {
                  "data": null,
                  "defaultContent": "&lt;button&gt;Delete&lt;/button&gt;",
                  "targets": -1
              }
           ]
      });
  ]);
  </code></pre>
  
  <p><strong>Note</strong>: The final td in the tbody has been left blank.</p>
  
  <pre><code>&lt;table id="example" class="sortable table table-bordered table-striped table-hover"&gt;
      &lt;thead&gt;
           &lt;?php 
              foreach($report_flag_info as $flag_info){ 
          ?&gt;
              &lt;tr&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;ItemID&lt;/th&gt;
                  &lt;th&gt;Image Path&lt;/th&gt;
                  &lt;th&gt;Image&lt;/th&gt;
                  &lt;th&gt;Reporter&lt;/th&gt;
                  &lt;th&gt;Title&lt;/th&gt;
                  &lt;th&gt;Image&lt;/th&gt; 
                  &lt;th&gt;Uploaded&lt;/th&gt;
                  &lt;th&gt;Reported&lt;/th&gt;
                  &lt;th&gt;Reason&lt;/th&gt;
                  &lt;th&gt;Description&lt;/th&gt;
                  &lt;th&gt;Problem&lt;/th&gt;
                  &lt;th&gt;No. Times Reported&lt;/th&gt;
                  &lt;th&gt;Delete Image&lt;/th&gt; // I want the button to be in this column
              &lt;/tr&gt;
  
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;?php 
                foreach($report as $flag_info){ 
          ?&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;...
              &lt;/tr&gt;
          &lt;?php } ?&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The table in the html is populated by using a foreach loop to load the data from the server to the table. I tried the suggestion in the following links to 
  solve the issue.</p>
  
  <p><a href="https://datatables.net/reference/option/columns.defaultContent" rel="nofollow noreferrer">https://datatables.net/reference/option/columns.defaultContent</a></p>
  
  <p><a href="https://stackoverflow.com/questions/22471862/how-do-i-add-button-on-each-row-in-datatable">How do I add button on each row in datatable?</a></p>
  
  <p><a href="https://datatables.net/examples/ajax/null_data_source.html" rel="nofollow noreferrer">https://datatables.net/examples/ajax/null_data_source.html</a></p>
  
  <p><a href="https://stackoverflow.com/questions/31327933/how-add-more-then-one-button-in-each-row-in-jquery-datatables-and-how-to-apply-e">How add more then one button in each row in JQuery datatables and how to apply event on them</a></p>