jquery datable add checkbox for object initialised table

Question

I am trying to get a checkbox column added to the jQuery datable, however am unable to do so.

My data table is initialised with a JSON object data and I want to add a column of checkboxes before the data. The data table shows the data but not check box column. The relevant code is as follows

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 CODE

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 CODE TO GET DATA FROM MYSQL DATABASE

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

I have searched through the forums but all of the results i get are for ajax sourced data and not ones populated like I do.

Regards,

you can get some idea from editor.datatables.net/examples/api/checkbox.html — Chetan Ameta
– Chetan Ameta, Commented Nov 2, 2015 at 5:06

Rav · Accepted Answer · 2015-11-02 05:09:42Z

1

You can try this:
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+'" />';
           }, 
    }]
});

answered Nov 2, 2015 at 5:09

Rav

3001 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arjun Bhandari Over a year ago

Thanks works like a charm. I will now be able to get all the check boxes which are selected with the click event.!!

Collectives™ on Stack Overflow

jquery datable add checkbox for object initialised table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related