Question

我直截了当地说到这里。我想要完成的是使用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>

QUERY RESULT

Answer 1

我认为你的ajax源有4列。但是你有5列＆lt; thead＆gt;。请删除＆lt;中的一个标记。 thead＆gt;。

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

Answer 2

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

接下来，使用示例＃2中显示为here的data内的表数据构建json。你的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

获取所需的所有下载和示例

Answer 3

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

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

Answer 4

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

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

Answer 5

使用它像：

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

DataTable AjaxSource

5 个答案: