开发者问题收集

数据表Ajax源

2017-06-13
745
php jquery datatable

我在这里直接切入正题。 我想要完成的是使用 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>

查询结果 在此处输入图片描述

3个回答

首先，您可能应该将 bServerSide 设置为 false 。如果为 true ，则需要实际读取请求参数，执行服务器端处理并按照 服务器端处理 文档中概述的那样构造返回数据。由于您在这里没有做任何这些事情，我假设您只是想使用 Ajax 源数据并让 DataTables javascript 处理表格处理

接下来，使用 data 中的表格数据构造您的 json，如示例 #2 中 此处 所示。您的 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

Eaten by a Grue
2017-06-13

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

<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>
美丽美丽花
2017-06-13
var oTable = $('#datatable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "${pageContext.request.contextPath}/",
"aoColumns" : [
{ "mData": "Ticket Numbe" },
{ "mData": "Subject" },
{ "mData": "From" },
{ "mData": "Date Created" }
]
});

我不明白具体问题是什么。这可能会有帮助..

User123123
2017-06-13