Заполнение Datatables с помощью php, отправляющего json

Question

У меня проблемы с определением проблемы в моем коде.

Я делаю поисковый скрипт и хочу показать результаты в Datatable. У меня есть форма поиска, которая отправляет данные в мой php-файл и возвращает json_encode результатов моего запроса, затем при успешном выполнении ajax я строю свою таблицу, передавая результаты в виде "data": response.

Запрос работал отлично, когда я делал это без Datatables, но, так как мне нужны нумерация страниц и прочее, мне нужно, чтобы он работал с Datatables.

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 для Datatable:

$('#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" - моя кнопка для отправки конечно, а "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

Вы, вероятно, пропускаете опцию

        dataType : "json",

на ваш код. Это может привести к путанице в типе данных, получаемых из сценария ajax, если он не указан.

Answer 2

Эта ссылка может помочь с тем, что вы пытаетесь выполнить: http://datatables.net/release-datatables/examples/ajax/objects.html. Это объясняет, что DataTables ожидает массивы для данных; однако, чтобы использовать объекты, это можно сделать с помощью опции columns.data.

Я также использовал DataTables без <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
    } );

});

Answer 3

Я верю <tbody></tbody> требуется с DataTables, поэтому он знает, куда поместить возвращенные данные. Попробуйте добавить это к вашему table#example,

    <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> 
        <tbody></tbody>         
    </table>