问来自JSON API的Datatable视图数据

EN

public function getSpecData($filter="get")
{
    $filter  = str_replace('_','/', $filter);
    $query   ="select * from tb_detail where subject='".$filter."'";
    $arrData = $this->db->query($query)->result();
    print_r(json_encode($arrData,JSON_PRETTY_PRINT));
}

[{"NO": "1","DESCRIPTION":"Mathematic","SUBJECT":"Praveen Jordan","TOTAL":"95"},{"NO": "2","DESCRIPTION":"Physic","SUBJECT":"Praveen Jordan","TOTAL":"90"}]

<input type="hidden" id="f_status" style="width:100%" name="f_status" value="<?php echo isset($f_subject)?$f_subject:""; ?>" class="form-control" required readonly>
<input type="hidden" id="f_status" style="width:100%" name="f_status" value="<?php echo isset($f_status)?$f_status:""; ?>" class="form-control" required readonly>
<table id="tb_detail" class="stripe row-border">
<thead>
<tr>
    <th>No</th>
    <th>Description</th>
    <th>Subject</th>
    <th>Total</th>
</thead>
<tbody>
<?php 
    $strDetail="";
    for($i=0;$i<20;$i++){
        $strDetail.="<tr>";
        $strDetail.="<td style=\"text-align:right;\">".($i+1).".</td>";
        $strDetail.="<td><select id='txtDesc[]".$i."' name='txtDesc[]".$i."' value=\"\" class=\"desc\" style=\"width:500px;\"></select></td>";
        $strDetail.="<td><select name='txtSub[]".$i."' class=\"sub\" value=\"\" style=\"width:200px;\"></select></td>";
        $strDetail.="<td><input name='txtTot[]".$i."' class=\"tot\" value=\"\" style=\"width:200px;\"></select></td>";
        $strDetail.="</tr>";
    }
    echo $strDetail;
?>
</tbody>
</table>
<script type="text/javascript">
 $(document).ready(function() {
    selectedId.push(document.getElementById("f_status").value);
    selectedId.push(document.getElementById("f_subject").value);
    var subject = selectedId[1];
    var table = $('#tb_detail').DataTable( {
            scrollY:        "400px",
            scrollX:        true,
            scrollCollapse: true,
            paging:         false,
            bInfo        : false,
            fixedColumns:   {
                leftColumns: 2,
                rightColumns: 1
            }
    });
    $('.tot').number( true, 0, '.', ',' );
    $(".desc").select2({
        ajax: {
            url: '<?php echo base_url();?>index.php/C_index/getLookupSelect2/desc',
            dataType: 'json'
        }
    });
    $(".sub").select2({
        ajax: {
            url: '<?php echo base_url();?>index.php/C_index/getLookupSelect2/sub',
            dataType: 'json'
        }
    });
    if (selectedId[0] == 'VIEW') {
        $.ajax({
            type  : 'ajax',
            url   : '<?php echo base_url();?>index.php/C_index/getSpecData/'+subject,
            dataType : 'json',
            success : function(data){
                var i;
                for(i=0; i<data.length; i++){
                        $('.desc').val(data[i].DESCRIPTION);
                        $('.sub').val(data[i].SUBJECT);
                        $('.tot').val(data[i].TOTAL);
                }    
            }
        });
    }
  }
</script>