Can't add lines to my table despite the good formatting Json

Loulou90

Hello

I want to fill a table (DataTables) with an AJax request

My request ajax returns Json but impossible to fill the table, I have this error:

DataTables warning: table id=dt-table - Requested unknown parameter '0' for row 1, column 0. For more information about this error, please see http://datatables.net/tn/4

My table:

    <div>
        <div class="table-responsive">
          <table id="dt-table" class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>Invoice</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

My JS:

var table = $('#dt-table').DataTable({});

$(document).on("click", ".button", function() {

    var inputVal = $(this).text();
    var selectVal = $('#select option:selected').val();

    $.post("/ajax/invoice.php", {find: inputVal, column: selectVal}).done(function(data){
      console.log(data)
      table.rows.add(data).draw();
    });

});

The ajax response:

[{"invoice":"AZERT"},{"invoice":"JFKDH"},{"invoice":"DKHFVEP"}]

My request:

$column = $_POST['column'];

    $request = $bdd->prepare("SELECT invoice from table_master WHERE $column = :find");
    $request->execute(array(
      ':find' => $_POST['find']
      ));

    $result = $request->fetchAll(PDO::FETCH_ASSOC);

    echo json_encode($result);

I do not see where the problem comes from, I look at the DataTables documentation and my json is normally properly formatted

https://datatables.net/reference/api/rows.add()

Thanks for your help

allan

You need to use columns.data to tell DataTables to get the information from the invoice property for the column. See this part of the manual for details.

Allan

Loulou90

I added :
var table = $('#dt-table').DataTable({
columns: [
{ data: 'invoice' }
]
});

But I still have this error :
DataTables warning: table id=packing-table - Requested unknown parameter 'invoice' for row 1, column 0. For more information about this error, please see http://datatables.net/tn/4

Thank you for your help

kthorngren

I suspect the problem is that in your ajax done function data is a JSON string that you need to parse into Javascript data. Something like this:

    $.post("/ajax/invoice.php", {find: inputVal, column: selectVal}).done(function(data){
    data = JSON.parse(data);      
    console.log(data)
      table.rows.add(data).draw();
    });

Kevin

Loulou90

@kthorngren Thank you it's work !

So if I understand correctly, the ajax request did not understand that the return was json and not text?

kthorngren

The returned data is JSON which is a string. JSON.parse converts the string into Javascript data which in this case is an array of objects.

Kevin