如何为数据表的每一行添加按钮？

Question

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

注意：tbody 中最后的 td 已留空。

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

通过使用 foreach 循环将数据从服务器加载到表中来填充 html 中的表。我尝试了以下链接中的建议 解决问题。

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

Answer 1

conumDefs 选项在 columns.data 之前应用，这意味着 columns.data 选项配置 { "data": "deleteImage" } 正在覆盖构建按钮的 columnDefs 选项。将 { "data": "deleteImage" } 更改为 { "data": null } 已阻止 按钮被覆盖，因此解决了问题。