带有 Codeigniter MYSQL 查询的数据表

Question

我正在尝试显示三个数据表，如this page 所示，其中包含从我的数据库中获取数据的变体，如here 所示。

我首先使用静态数据（来自arrays.txt - 第一个链接）测试了该页面，它运行良好。但是，我现在正在为 MYSQL 数据和 JSON 苦苦挣扎。 显示“处理中...”的信息消息出现，但表格保持为空。

我的 Javascript：

$(document).ready(function(){
        $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
        $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
    } );

    $('table.table').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "dataSrc": "Data", // Tried adding this but didn't help
            "url": "/hireStaffController/getDataTable",
            "type": "POST"
        },
        "columns": [
            { "data": "id_staff" },
            { "data": "name_english" },
            { "data": "name_french" },
            { "data": "position" },
            { "data": "efficiency" },
            { "data": "salary" }
        ]
    } );  
}

我的控制器：

public function getDataTable(){
   $data = $this->staffModel->get_all_staff_DB();   
   echo json_encode($data);     
}

我的模特：

public function get_all_staff_DB(){
  $query = $this->db
        ->select('*')
        ->from('game_staff')
        ->get();
  return $query->result();
}

Firebug 的 JSON 响应似乎是正确的：

   [{
        "id_staff": "1",
        "name_english": "Ski patrol 1",
        "name_french": "Pisteur secouriste 1",
        "position": "skipatrol",
        "efficiency": "50",
        "salary": "1500"
    }, {
        "id_staff": "10",
        "name_english": "Bus driver 2",
        "name_french": "Chauffeur de bus 2",
        "position": "driver",
        "efficiency": "55",
        "salary": "1380"
    }]

Firebug 抛出此错误：

TypeError: c is undefined
...iRecordsDisplay=parseInt(f,10);d=0;for(e=c.length;d<e;d++)N(a,c[d]);a.aiDisplay=...
                                           ^

所以我尝试在 Ajax 中添加"dataSrc": "Data",，如here 所述，但没有运气，同样的错误。这是什么Data？我也尝试了一个小的“d”。

你能看出哪里不对吗？

我的 HTML 代码：

<div class="tab-pane active" id="tab-table1">
    <table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
         <thead>
             <tr>
                 <th>Name</th>
                 <th>Position</th>
                 <th>Office</th>
                 <th>Extn.</th>
                 <th>Start date</th>
                 <th>Salary</th>
             </tr>
          </thead>
      </table>
  </div>
<div class="tab-pane" id="tab-table2">
    <table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
             //same ...
     </table>
</div>

Answer 1

尝试将“数据”作为回显数据的键：

public function getDataTable(){
   $data = $this->staffModel->get_all_staff_DB();   
   echo json_encode(array('Data' => $data));     
}

当您将 dataSrc 指定为“Data”时，datatables 会在 ajax 调用返回的 json 中查找“Data”属性，并将该属性用作表的源。

Answer 2

我希望 HTML 表格存在于那里。 尝试使用 ID 而不是类。
你所做的其他一切看起来都很好。

$('#ID').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/hireStaffController/getDataTable",
            "type": "POST"
        },
        "columns": [
            { "data": "id_staff" },
            { "data": "name_english" },
            { "data": "name_french" },
            { "data": "position" },
            { "data": "efficiency" },
            { "data": "salary" }
        ]
    } );