2015-11-02 38 views
1

我想獲得一個複選框列添加到jQuery datable,但我無法這樣做。jquery數據添加複選框的對象初始化表

我的數據表是用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的數據,而不是像我這樣的人。

問候,

+0

你可以從HTTP的一些想法://editor.datatables .net/examples/api/checkbox.html –

回答

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+'" />'; 
      }, 
    }] 
}); 
+0

感謝您使用ac危害。現在我將能夠獲得所有通過點擊事件選中的複選框。 –