-2
$(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": "<button>Delete</button>",
                "targets": -1
            }
         ]
    });
]);

Note: The final td in the tbody has been left blank.

<table id="example" class="sortable table table-bordered table-striped table-hover">
    <thead>
         <?php 
            foreach($report_flag_info as $flag_info){ 
        ?>
            <tr>
                <th>ID</th>
                <th>ItemID</th>
                <th>Image Path</th>
                <th>Image</th>
                <th>Reporter</th>
                <th>Title</th>
                <th>Image</th> 
                <th>Uploaded</th>
                <th>Reported</th>
                <th>Reason</th>
                <th>Description</th>
                <th>Problem</th>
                <th>No. Times Reported</th>
                <th>Delete Image</th> // I want the button to be in this column
            </tr>

    </thead>
    <tbody>
        <?php 
              foreach($report as $flag_info){ 
        ?>
            <tr>
                <td></td>...
            </tr>
        <?php } ?>
    </tbody>
</table>

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.

https://datatables.net/reference/option/columns.defaultContent

How do I add button on each row in datatable?

https://datatables.net/examples/ajax/null_data_source.html

How add more then one button in each row in JQuery datatables and how to apply event on them

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
Andre Reid
  • 95
  • 2
  • 11
  • Within your `foreach` loop, add a ` – Marc Jan 22 '18 at 21:29
  • have you check this answer https://stackoverflow.com/questions/22471862/how-do-i-add-button-on-each-row-in-datatable?noredirect=1&lq=1 – Darshan Dave Jan 24 '18 at 06:26
  • Possible duplicate of [How do I add button on each row in datatable?](https://stackoverflow.com/questions/22471862/how-do-i-add-button-on-each-row-in-datatable) – Darshan Dave Jan 24 '18 at 06:34

1 Answers1

0

The fact that conumDefs Option was applied before columns.data, meant that columns.data Option config { "data": "deleteImage" } is overwriting the columnDefs option that is building the button. Changing { "data": "deleteImage" } to { "data": null } prevented the button being overwritten and hence, solved the problem.

Andre Reid
  • 95
  • 2
  • 11