jQuery Datable添加對象初始化表的復選框

Question

我試圖將復選框列添加到jQuery datable，但是無法這樣做。

我的數據表是用JSON對象數據初始化的，我想在數據前添加一列復選框。 數據表顯示數據，但不顯示復選框列。 相關代碼如下

HTML

<table id="mytable" class="table table-striped table-bordered" cellspacing="0" width="100%">


    <thead>
            <tr>
                <th>Request ID</th>
                <th>Request Date</th>
                <th>Leave Type</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Status</th>
            </tr>
        </thead>
    </table>

JAVASCRIPT代碼

msg = $.parseJSON(msg);
            console.log(msg);
            $('#mytable').DataTable({
                data: msg,
                columns: [
                    { data: 'RequestID' },
                    { data: 'RequestDate' },
                    { data: 'LeaveType' },
                    { data: 'LeaveStart' },
                    { data: 'LeaveEnd' },
                    { data: 'Status' }
                ],
                "columnDefs": [ {
                  "targets": 0,
                  "searchable": false,
                  "data": null,
                  "defaultContent": "<button>Click!</button>"
                }]
            });

PHP代碼從MYSQL數據庫獲取數據

$result = $conn->query($sql);
//$result = $result->num_rows;

if($result->num_rows >0){
   $res = array();
   while($row =mysqli_fetch_assoc($result))
    {
       $res[] = $row;
    }
   //$res = array( "data"=>$res);
   $output = json_encode($res);

} else
{
$output = 'fail';
}

echo $output;
die();

我已經搜索了所有論壇，但得到的所有結果都是針對ajax數據，而不是像我一樣填充的數據。

問候，

Answer 1

您可以嘗試以下方法：
HTML

<table id="mytable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th><input type="checkbox" name= "check_all" id="check_all" value="1" /></th>
            <th>Request ID</th>
            <th>Request Date</th>
            <th>Leave Type</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Status</th>
        </tr>
</thead>

使用Javascript：

msg = $.parseJSON(msg);
$('#mytable').DataTable({
    data: msg,
    columns: [
        { data: 'RequestID' },
        { data: 'RequestDate' },
        { data: 'LeaveType' },
        { data: 'LeaveStart' },
        { data: 'LeaveEnd' },
        { data: 'Status' }
    ],
    "columnDefs": [ {
         "targets": 0,
          "searchable": false,
          "data": "RequestID",
          "render": function ( data, type, full, meta ) {
                    return '<input type="checkbox" name= "check_id[]" data-id="'+data+'" />';
           }, 
    }]
});