javascript - 使用 php 发送 json 填充数据表

Question

我无法确定我的代码中的问题。

我正在做一个搜索脚本，我想在数据表中显示结果。我有一个搜索表单，它将数据发送到我的 php 文件并返回查询结果的 json_encode，然后在 ajax 成功时，我构建了我的表，将结果传递到“数据”:响应中。

当我在没有数据表的情况下执行查询时，查询工作得很好，但由于我需要分页和其他东西，我需要它来处理数据表。

表格的 HTML:

<div id="results">

        <table id="example" class="display compact hover stripe" cellspacing="0" width="100%">
            <thead>

                <th>Cognome</th>
                <th>Nome</th>
                <th>Telefono</th>
                <th>Provincia</th>
                <th>Tipo Cliente</th>
                <th>Amministrazione</th>
                <th>Stato</th>
                <th>Fonte</th>
                <th>Data Ricezione</th>
                <th></th>

            </thead>          
        </table>

    </div>

用于数据表的 Javascript:

$('#submit_src').on("click", function() { 

    $.ajax({
        data: $("#ricerca").serialize(), 
        type: $("#ricerca").attr('method'), 
        url: $("#ricerca").attr('action'),
        success: function(response) {

            $('#example').dataTable( {
                "data": response,
                "sPaginationType": "listbox",
                "bFilter": false,
                "jQueryUI": true,
                "processing": true,
                'iDisplayLength': 25,
            } );
        }

    });
    return false;
});

“submit_src”是我提交类(class)的按钮，“ricerca”是我的表单名称。

我得到的json代码是:

{"sEcho":0,"iTotalRecords":"35036","iTotalDisplayRecords":"1","aaData":[["stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff"]]}

错误:

DataTables warning: table id=example - Requested unknown parameter '1' for row 0.

Answer 1

此链接可能有助于您实现目标:http://datatables.net/release-datatables/examples/ajax/objects.html .它解释了 DataTables 需要数据数组；但是，为了使用这些对象，可以使用 columns.data 选项来完成。

我也使用过没有 <tbody> 的数据表所以这应该不是问题。

编辑: 尝试以下操作，我能够在表格中显示“内容”:

$('#example').dataTable( {
    "data": response.aaData
} );

编辑 2:

jQuery(document).ready(function() {

    var response = {
       "sEcho":0,"iTotalRecords":"35036","iTotalDisplayRecords":"1",
       "aaData": [
       ["stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff"]]
    };

    $('#example').dataTable( {
        "data": response.aaData,
        //"sPaginationType": "listbox",
        "bFilter": false,
        "jQueryUI": true,
        "processing": true,
        'iDisplayLength': 25
    } );

});