Jquery DataTables：数据未通过 Ajax 显示在表中答案

【问题标题】：Jquery DataTables: Data not displaying in table via AjaxJquery DataTables：数据未通过 Ajax 显示在表中
【发布时间】：2018-01-23 14:51:38
【问题描述】：

我的问题是 Jquery DataTables 在加载时挂起，不会显示来自 php 脚本的任何数据：

这是我的 HTML：

 <!-- Default box -->
  <div class="box">
    <div class="box-header with-border">
      <h3 class="box-title">Time Management</h3>

      <div class="box-tools pull-right">
        <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
          <i class="fa fa-minus"></i></button>
        <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
          <i class="fa fa-times"></i></button>
      </div>
    </div>
    <div class="box-body">
       <table id="example" class="table table-bordered table-hover">
           <thead>
               <tr>
               <th>ID</th>
               <th>Clock In</th>
               <th>Lunch Started</th>
               <th>Lunch Ended</th>
               <th>Clock Out</th>
               </tr>
           </thead>
       </table>
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
      Footer
    </div>
    <!-- /.box-footer-->
  </div>
  <!-- /.box -->

我的 Jquery 代码：

<script>
    $(document).ready(function() {
    $('#example').DataTable({
       "ajax": "api/timemanageprocess.php", 
       "dataSrc": '',
       "type": "POST",
    
    "columns": [
        {"data": "PASS_ID"},
        {"data": "CLOCK_IN"},
        {"data": "START_LUNCH"},
        {"data": "END_LUNCH"},
        {"data": "CLOCK_OUT"}
        ],
      });
    });
</script>

还有我的 PHP 脚本的结果。我回应了 json_encode() 的结果：

我尝试使用"data": data & "data": json 作为DataTable() 中的选项。我试图用大括号来定义 ajax 的选项。我试过完全排除dataSrc=''，我试过删除type: 'POST'并将其留给GET。我知道我的 php 脚本地址是正确的。我不知道是什么或它们阻止了数据填充到数据表中。有人可以帮我弄清楚吗？提前致谢。非常感谢您的帮助。

PHP


include ('../includes/sessions.php');

$select = "SELECT PASS_ID, CLOCK_IN, START_LUNCH, END_LUNCH, CLOCK_OUT FROM timeclock WHERE USERNAME = '$sessuser'";

$query = mysqli_query($dbc, $select) or die(mysqli_error($dbc));
$resnum = mysqli_num_rows($query);

//echo $resnum;
while($row = $query->fetch_assoc())
{
    $out[] = $row;
}

echo json_encode(array('data' => $out));
mysqli_free_result($query);
$dbc->close();

?>

【问题讨论】：

所以这是一个帖子而不是一个获取？这行得通吗？ ajax: { "url": 'api/timemanageprocess.php', "type": "GET", "dataSrc": ''}
@BryanDellinger 不幸的是，没有。
所以你确实看到你有 "ajax": "api/blahblahblah"，当我认为它应该是 ajax:{url: yoururl, type: 'POST', dataSrc: ''} 时，你剩下的东西
@BryanDellinger 我过去尝试过，遗憾的是数据没有填充到表格中。

标签： php jquery ajax datatable datatables

【解决方案1】：

在您收到的 json 中，没有 data 属性。

如果您可以修改 json 的生成方式，请将所有对象放在 data 对象中...就像在 their documentation 中提供的示例一样：

{
  "data": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    /...

或者，如果您无法修改 json，请尝试以下操作：（我没有对此进行测试...您必须尝试）

"columns": [
    {"PASS_ID"},
    {"CLOCK_IN"},
    {"START_LUNCH"},
    {"END_LUNCH"},
    {"CLOCK_OUT"}
]

**编辑**

只是为了确保 json 没有问题...
尝试从另一个 ajax 请求中请求它（仅作为测试）：

$.ajax({
  url: "api/timemanageprocess.php",
  method: "post",
  dataType: "json",
  success: function(response){
    console.log( JSON.stringify(response) );
  },
  error: function(request, status, errorThrown){
    console.log(errorThrown);
  }
});

如果结果没问题，我们将围绕 Datatable 进行调查。
我们的想法是缩小问题范围...
;)

【讨论】：

我已使用 stackoverflow.com/questions/3281354/…> 将数组转换为数据对象，而数据表无法识别新格式化的信息。我还尝试了您的第二种可能的解决方案，它不起作用。
嗯，数据确实通过常规的ajax返回到console.log中。
好。它的结构是否应有尽有？（使用“数据”对象数组？
是的。它是。看起来像这样： {"data":[{"PASS_ID":"5","CLOCK_IN":"2017-08-10 23:27:13","START_LUNCH":"2017-08-12 12:58: 59","END_LUNCH":"0000-00-00 00:00:00","CLOCK_OUT":"0000-00-00 00:00:00"}.....}]}
我想感谢您帮助我。我很感激！奇怪的是，删除 dataSrc 和 ajax 和列周围的双引号实际上填充了表格。一点也不像 Data Tables 网站上的示例。

【解决方案2】：

按照 Louys Patrice Bessette 的建议，在 PHP 端，我将数组转换为 json 对象，而不是 json 数组。我，然后我取消引用选项。所以而不是：

$('#example').DataTable({
    "ajax": "url", 
    "columns" : [
        {"data": "keyname"},
        {"data": "keyname"},
    ]
})

我做到了：

$('#example').DataTable({
    ajax: "url", 
    columns : [
       {"data": "keyname"},
       {"data": "keyname"},
    ]
})

我也删除了dataSrc 选项。

【讨论】：