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

Posted 2023-05-07

【中文标题】如何为数据表的每一行添加按钮？

【英文标题】：How to add buttons to each row of a datatable?

【发布时间】：2018-07-01 09:48:00

【问题描述】：

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

【问题讨论】：

在foreach 循环中，添加一个<button> 元素，无论它属于什么地方。您的循环只是生成 HTML，因此您可以...在有意义的地方添加按钮 HTML。

这个答案你查了吗***.com/questions/22471862/…

How do I add button on each row in datatable?的可能重复

【参考方案1】：

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