数据表 AjaxSource答案

【问题标题】：DataTable AjaxSource数据表 AjaxSource
【发布时间】：2017-11-14 17:48:12
【问题描述】：

我在这里直奔主题。我想要完成的是使用 ajax 填充表格。

这给了我jquery.dataTables.min.js:39 Uncaught TypeError: Cannot read property 'length' of undefined 错误。

这是我的代码：

我的 php 代码：

public function pending_data(){

    $result = $this->ticketing_m->get_pending_tickets();
    echo json_encode($result);

}

JQUERY

var datatable = $("#datatable");

datatable.DataTable({
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": datatable.data('url')
});

HTML

 <table id="datatable"  class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%" data-url="<?php echo site_url(array("dashboard","pending_data")); ?>">
    <thead>
        <tr>
            <th>Ticket Number</th>
            <th>Subject</th>
            <th>From</th>
            <th>Date Created</th>
        </tr>
    </thead>
</table>

查询结果

【问题讨论】：

那么问题是什么？
@MayankPandeyz console.log 错误jquery.dataTables.min.js:39 Uncaught TypeError: Cannot read property 'length' of undefined
页面加载后执行的jQuery代码吗？
你为什么使用过时的属性？什么版本的数据表？ get_pending_tickets() 的输出是什么？这里的问题可能是您没有在回复中定义data，但由于您没有将其包含在您的问题中，因此无法确定。
@SougataBose 是的先生...我将在这里发布查询结果..我对此真的很陌生..所以请多多包涵

标签： php jquery datatable

【解决方案1】：

var oTable = $('#datatable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "${pageContext.request.contextPath}/",
"aoColumns" : [
{ "mData": "Ticket Numbe" },
{ "mData": "Subject" },
{ "mData": "From" },
{ "mData": "Date Created" }
]
});

我没有得到确切的问题。这可能会有所帮助..

【讨论】：

【解决方案2】：

做类似的事情也使用数据类型https://datatables.net/examples/server_side/jsonp.html

 "processing": true,
 "serverSide": true, 
 "ajax": {
            "url": "scripts/jsonp.php",
            "dataType": "jsonp"
        }

【讨论】：

【解决方案3】：

我认为您的 ajax 源有 4 列。但是您在中有 5 列。请删除中的一个标签。

<table id="datatable"  class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%" data-url="<?php echo site_url(array("dashboard","pending_data")); ?>">
    <thead>
        <tr>
            <th>Ticket Number</th>
            <th>Subject</th>
            <th>From</th>
            <th>Date Created</th>
        </tr>
    </thead>
</table>

【讨论】：

对不起我的不好..我已经更新了我的文件..我忘了在这里更新我的问题..应该有 4 列..

【解决方案4】：

像这样使用它：

var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';

  var table = $('#example').DataTable({
    'processing': true,
    'serverSide': true,
    'ajax': {
      type: 'POST',
      'url': url,
      'data': function (d) {
        console.log(d.order);
        return JSON.stringify( d );
      }
    }

  });

Working Fiddle

【讨论】：

【解决方案5】：

首先，您应该将bServerSide 设置为false。如果是true，您需要实际读取请求参数，进行服务器端处理并按照Server-side processing 文档中的说明构建您的返回数据。由于您在这里没有做任何这些事情，我假设您只是想使用 Ajax 源数据并让 DataTables javascript 处理表处理

接下来，使用 data 中的表数据构建 json，如示例 #2 中的 here 所示。你的 json 应该是这样的：

{
    "data": [
        {
            "date_created": "2017-06-13 13:57:24",
            "full_name": "John Doe",
            "subject": "Test",
            "ticket_number": "Ticket 1234"
        },
        ...
    ]
}

要实现这一点，您可以在pending_data() 的回复中做一些简单的事情：

echo json_encode(array('data' => $result));

此外，您在此处设置 DataTables 属性的方式看起来像是在使用非常旧的版本或过时的语法。我建议安装最新版本并使用最新代码。您可以在以下位置获得所有可能需要的下载和示例：https://datatables.net

【讨论】：