DataTables logo
≡

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

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

Loulou90Loulou90 Posts: 11Questions: 4Answers: 0
in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 65,863Questions: 1Answers: 10,957 Site admin

    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

  • Loulou90Loulou90 Posts: 11Questions: 4Answers: 0
    edited July 2018

    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

  • kthorngrenkthorngren Posts: 22,495Questions: 26Answers: 5,169
    Answer ✓

    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

  • Loulou90Loulou90 Posts: 11Questions: 4Answers: 0

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

  • kthorngrenkthorngren Posts: 22,495Questions: 26Answers: 5,169

    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

This discussion has been closed.