javascript - 来自 JSON API 的数据表视图数据

问题描述

我想从包含 JSON 格式数组的控制器中查看数据，但不幸的是，我被困在这里。场景就是这样。

我有一个使用 Datatable 网格的表，我用默认的 20 行填充了表的行，每行都包含下拉 select2，它工作正常。当我想在我的默认表上预览 20 行的特定数据时，问题就来了。

这是我的控制器，它提供由用户想要的特定数据触发的 json 数组：

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"}]

我应该处理这个 JSON 的详细视图是：

<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>

我想要的输出是我应该如何使 JSON 数组加载到我的数据表中。

任何人都可以解决这个问题，我坚持了大约两天。

标签： javascriptarrayscodeigniterdatatablesjquery-select2

javascript - 来自 JSON API 的数据表视图数据

问题描述

解决方案

推荐阅读