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选项config {“data”：“deleteImage”} 正在覆盖正在构建按钮的columnDefs选项。阻止将{“data”：“deleteImage”}更改为{“data”：null} 按钮被覆盖，因此解决了问题。

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

1 个答案: