无法从 Codeigniter 中的控制器填充 DataTable 中的数据答案

【问题标题】：Unable to populate data in DataTable from Controller in Codeingiter无法从 Codeigniter 中的控制器填充 DataTable 中的数据
【发布时间】：2021-07-14 09:00:04
【问题描述】：

我正在尝试通过 ajax 使用服务器端处理使用 DataTable 列出数据。当 ajax 命中时，我得到了控制器的预期响应。但是数据仍然没有填充到数据表中。

控制器

 public function get_role_details() {
    $this->load_generic_model(array('mst_role_model'));

    $draw = intval($this->input->get("draw"));
    $start = intval($this->input->get("start"));
    $length = intval($this->input->get("length"));

    $selected_rol = array('m_role_id','m_role_name');
    $condition = array('m_role_status' => 'enable');
    $other_configs = array('order_by' => 'm_role_id', 'order_dir' => 'DESC');
    // $other_configs
    $get_role = $this->mst_role_model->get_where_selected( $selected_rol, $condition, $other_configs);

    if( (empty($get_role)) || !($get_role) )
    {
        echo json_encode(array('status' => 500, 'msg' => 'Server Error, Try again later'));
        return false;
    }
    $data['role'] = $get_role;
    $data['role_cnt'] = count($get_role);
    
    $json_data = json_encode(array('status' => 200, 'data' => $data));
    
    echo $json_data;
}

查看

<section class="content">
    <div class="box">
        <div class="box-body">
            <table id="logTable1" class="table" width="100%">
                <thead>
                    <th>Role id</th>
                    <th>Role Name</th>
                </thead>
            </table>
        </div>
    </div>
</section>

<script type="text/javascript"> 
    $(document).ready(function() { 
        $("#logTable1").DataTable({
            'processing': false,
            'serverSide': true,
            'ajax': {
                'url':'<?php echo base_url()."role/get_role_details"; ?>',
                'type' : 'POST'
            },
            'columns' : [
                {data : 'm_role_id'},
                {data : 'm_role_name'}
            ]
        });
    }); 
</script>

【问题讨论】：

标签： ajax codeigniter datatable

【解决方案1】：

我使用类似以下的东西

$( document ).ready(function() { // when document is ready load
    $.ajax({ // create an AJAX call...
        type: $(this).attr('method'), // GET or POST
        url: "<?php echo base_url("controller/function/"); ?>", // the file to call
        success: function(response) { // on success..
            var dts=JSON.parse(response) // becomes your array 
            var dataSet =dts.result; 

// I specified the results in your case data to just call one filter then create the data table within the success call 
     
           $('#table_name').DataTable( {
                data: dataSet,
                fixedHeader: true,
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5',
                ],
                columns: [
                    { title: "Who",
                        data: "username",
                        defaultContent: ""
                    },
                    {
                        title: "Accepted",
                        data: "accepted_when",
                        render: function ( data, type, row ) {
                            var rowgpd = moment(data).format("Do MMM YYYY HH:mm:ss");
                            return rowgpd;
                        }},
                    { title: "Status",
                        data: "status",
                        defaultContent: ""
                    },
                ]
            } );

        }
    });
    return false; // cancel original event to prevent form submitting
});

我相信它会完全按照您的意愿行事。我认为它非常简单。所以对我来说，我必须解析响应以删除 json 编码并允许我从数组中调用行和列。我也使用moment js来解析日期并以更好的格式显示。

【讨论】：

【解决方案2】：

数据数组位置DataTables需要一个项目数组来表示表的数据，其中数组中的每个项目都是一行。该项目是通常是一个对象或一个数组（在下面更详细地讨论） - 所以我们需要做的第一件事是告诉 DataTables 该数组在哪里在数据源中。

https://datatables.net/manual/ajax

【讨论】：

【解决方案3】：

根据您的屏幕截图，您的 JSON 响应如下所示：

{
    "data": {
        "role": [{
            "m_role_id": "47",
            "m_role_name": "Aakash"
        }, {
            "m_role_id": "46",
            "m_role_name": "Visiting Doctor"
        }]
    }
}

这是有效的 JSON，它可能是您所期望的。但是，当您将 DataTables 与 'serverSide': true 一起使用时，这不是 DataTables 所期望的。

有两个问题：

您需要告诉 DataTables 数组（包含您的行数据）在 JSON 中的位置 - 在您的情况下是 data.role。通常，您会使用 dataSrc 选项来执行此操作：

'ajax': {
  'url':'<?php echo base_url()."role/get_role_details"; ?>',
  'type' : 'POST',
  'dataSrc': 'data.role'
},

因为您使用的是服务器端处理，所以您的 JSON 响应应使用 server-side documentation 中显示的结构：

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [{
        "m_role_id": "47",
        "m_role_name": "Aakash"
    }, {
        "m_role_id": "46",
        "m_role_name": "Visiting Doctor"
    }]
}

注意以下几点：

JSON 需要包含extra fields 等recordsTotal，以确保正确显示分页控件和信息。
[ ... ] 数组现在直接附加到 JSON 中的 data。没有中间的role 对象。

如果您愿意，您仍然可以保留role，但您仍然需要使用dataSrc，如上所述。

为简单起见，我建议您遵循文档中的结构。

【讨论】：