checkbox from controller Codeigniter not show in datatables ajax call

Question

I have little problem on my code.

I have code to show data in datatables and in my first column I want to show checkbox select. My datatables was created by ajax call and controller in Codeigniter. But when I load the code, checkbox not show, but eachother column can show.

This is My code

My Controller

function data_schedule_emp()
{

    $draw       = intval($this->input->get("draw"));
    $start      = intval($this->input->get("start"));
    $length     = intval($this->input->get("length"));
    $year       = $this->input->post("year");
    $month      = $this->input->post("month");
    $dept       = $this->input->post("dept");
    $pos        = $this->input->post("pos");
    $date_slct  = $year.'-'.$month.'-';
    $shifts     = $this->m_general->get_data('tb_shift')->result();
    $rows       = $this->m_employee->list_schedule_emp($date_slct)->result();
    if($dept=='99'){
        if($pos=='ALL'){
            $pin_emp    = $this->m_employee->get_detail_emp()->result();
        }else{
            $pin_emp    = $this->m_employee->get_detail_emp($pos)->result();
        }
    }else{
        if($pos=='ALL'){
            $pin_emp    = $this->m_employee->get_detail_emp($dept)->result();
        }else{
            $pin_emp    = $this->m_employee->get_detail_emp($dept,$pos)->result();
        }
    }
    $total_days = tglakhir($year,$month);
    $data       = array();
    $no         = 1;
    $all_data   = array();
    $array_pin  = array();
    $row        = array();
    $date       = array();

    foreach ($rows as $row) {
            // this may seem convoluted, take your time to understand
            $people[$row->date][$row->id_nip] = $row;
        }

    foreach($pin_emp AS $q)
        {
            $array_pin[]=$q->emp_pin;
            $details[$q->emp_pin] = $q;
        }
    foreach($shifts AS $shift_e){
            $array_shift[$shift_e->id_shift] = $shift_e;
        }
    for($m=1; $m <= $total_days; $m++){
            if($m<10){
            $m = '0'.$m;
            }else{
                $m = $m;
            }
            $dates[]=$m;
        }
    foreach ($array_pin AS $pin){
        $x=$bg=$n_shift='';
        $date_range = array();
        $n_shift        = $details[$pin]->emp_shift;
        foreach ($dates as $date) {
            $x_shift = $n_shift;
            $full_date = $year.'-'.$month.'-'.$date;
            $day = date('D', strtotime($full_date));
            if(($n_shift==1) && ($day=='Fri')){
                $x_shift=2;
            }if(($day == 'Sun') OR ($day == 'Sat')){
                $x_shift=13;
            }
            $bg     = $array_shift[$x_shift]->background;
            $label  = $array_shift[$x_shift]->code_shift;
            $note   = $array_shift[$x_shift]->note;
            $x='<a class="btn '.$bg.' btn-xs" data-toggle="tooltip" data-placement="top" title="'.$note.'">'.$label.'</a>';
            $check='<input type="checkbox">';
            if(isset($people[$full_date][$pin]->id_shift_emp)==TRUE){
                $get_shift  = $people[$full_date][$pin]->id_shift_emp;
                $code_shift = $people[$full_date][$pin]->code_shift;
                $bg         = $array_shift[$get_shift]->background;
                $label      = $array_shift[$get_shift]->code_shift;
                $note       = $array_shift[$get_shift]->note;
                $x='<a class="btn '.$bg.' btn-xs" data-toggle="tooltip" data-placement="top" title="'.$note.'>'.$code_shift.'</a>';
            }
            $date_range[]=$x;
        }
        $data = array(
            $check,
            $pin,
            $details[$pin]->emp_name
        );
        $no++;
    $all_data[]=array_merge($data,$date_range);
    }

    $output = array(
            "draw" => $draw,
            "recordsTotal" => $rows,
            "recordsFiltered" => $rows,
            "data" => $all_data
        );
    echo json_encode($output);
}

This my ajax call

$('#list_schedule_emp').dataTable({
        "ajax": {
            "url": base_url+'employee/data_schedule_emp',
            "type": "POST",
            "data": {
                "year": $('#year').val(),
                "month": $('#month').val(),
                "dept": $('#dept').val(),
                "pos": $('#pos').val()
            }
        },
        "className": 'select-checkbox',
        drawCallback: function() {
            $('[data-toggle="tooltip"]').tooltip({
                container: 'body'
            });
        }
    });

and this My View

<div class="table-responsive">
                <input type="hidden" name="year" id="year" value="<?php echo $year; ?>">
                <input type="hidden" name="month" id="month" value="<?php echo $month; ?>">
                <input type="hidden" name="dept" id="dept" value="<?php echo $dept; ?>">
                <input type="hidden" name="pos" id="pos" value="<?php echo $pos; ?>">
                <table class="table table-bordered table-striped table-hover" id="list_schedule_emp">
                    <thead>
                        <tr>
                            <th>Select</th>
                            <th>Pin</th>
                            <th>Nama</th>
                            <?php foreach ($date_range AS $date) { ?>
                                <th><?php echo $date ?></th>
                            <?php } ?>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>

Where My mistake? Please show me.

Thanks All.

Answer 1

Datatables provides functionality for automatically adding a checkbox as the first column, see the docs or this similar question on their forums

Essentially, droping all the checkbox creation from your data completely and changing your initialization code to something like the below should work.

NOTE

You havent told us the version of datatables you're using and their api has changed in many subtle ways over the years so you may need to tweak this example by reading the related docs for your specific version.

$('#list_schedule_emp').dataTable({
    "ajax": {
        "url": base_url+'employee/data_schedule_emp',
        "type": "POST",
        "data": {
            "year": $('#year').val(),
            "month": $('#month').val(),
            "dept": $('#dept').val(),
            "pos": $('#pos').val()
        }
    },
    drawCallback: function() {
        $('[data-toggle="tooltip"]').tooltip({
            container: 'body'
        });
    }
    columnDefs: [ {
        orderable: false,
        className: 'select-checkbox',
        targets:   0
    } ],
    select: {
        style:    'os',
        selector: 'td:first-child'
    },
    order: [[ 1, 'asc' ]],
});