Problem with insert a new row

Problem with insert a new row

ferran_munozferran_munoz Posts: 28Questions: 7Answers: 0

Hi.

I have a problem when I want to insert data after an ajax call with the JSON of my project.

The definition of my table is:

<table class="table table-bordered m-table" id="tableExample">
    <thead class="columns titulars-sms">
        <tr>
            <th class="text-center">Name</th>
            <th class="text-center">Created</th>
        </tr>
    </thead>
</table>
var tableExample = $('#tableExample').DataTable();
$.ajax({                                      
    url: "{{url('/')}}/getusers",
    method: "GET",
    xhrFields: {
        withCredentials: true
    },
    data: {"CreationDate": Date},
    success: function (data,status,xhr) {
        $.each(data, function(index,value){
            tableExample.row.add({
                "Name": value.name,
                "Created": value.created
            }).draw();
        });
    },
});

And the error that I get in my screen is:

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

I debug with Chrome console and data is an array and have the attr "name" and "created".

So, I don't know where could be the error :neutral:

If you need some extra info, tell me.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    I'm assuming this is your Datatables initialization:

    var tableExample = $('#tableExample').DataTable();
    

    You haven't defined columns.data which is needed when adding objects like this:

                tableExample.row.add({
                    "Name": value.name,
                    "Created": value.created
                }).draw();
    

    Without defining columns.data Datatables expects the data to be an array for each row instead of the object you are adding. That is basically what the error link http://datatables.net/tn/4 is trying to say.

    Looks like you data in the success function is an array of objects. If so you can just use tableExample.rows.add( data ).draw();. Notice the plural rows. However if you choose to loop through the data and use row.add() remove the chained .draw() and use tableExample.draw(); after the each loop. It will be more efficient to execute draw() once rather than for each row added.

    Kevin

  • ferran_munozferran_munoz Posts: 28Questions: 7Answers: 0

    Yes Kevin, the success is an array of object, look the image.

    But the error continues :neutral:

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited June 2020 Answer ✓

    Looks like the objects and the array have the keys fecha and total. But you are using something different value.name and value.created:

    tableExample.row.add({
        "Name": value.name,
        "Created": value.created
    }).draw();
    

    But the error continues

    What did you change? If you added columns.data you need to use fecha and total, like this:

    columns: [
      {data: 'fecha'},
      {data: 'total'}
    ],
    

    Kevin

  • ferran_munozferran_munoz Posts: 28Questions: 7Answers: 0

    Oh yeah, now it works Kevin.

    Yeah, it was a mistake in the data names... Sorry and thanks!

    Regards!

This discussion has been closed.