Reload new data and redraw

quantasized

I don't have a link to test case but basically I have a Datatable with rows pre-loaded into the page from a DB via PHP.
The next thing I'd like it to do is using a JQuery datareangepicker, select a date range and then upon apply, it selects the matching records given the data range time stamp submitted to PHP via ajax.
Anyway, I have most of it functional but I am running into an issue when it loads the new data into the table and redraws.

I get this error:
DataTables warning: table id=items-table - Requested unknown parameter '[object Object]' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

A small sample of my data incoming from ajax/PHP >

{
    "data": [
        [
            "Acid Mix",
            "Amendments",
            "2",
            "8.20"
        ],
        [
            "Broccoli - Belstar",
            "Plugs",
            "4",
            "2.00"
        ],
        [
            "Cabbage - Farao",
            "Plugs",
            "4",
            "2.00"
        ],
        [
            "Cauliflower - Bermeo",
            "Plugs",
            "11",
            "5.50"
        ],
        [
            "Cauliflower - Flame Star",
            "Plugs",
            "4",
            "2.00"
        ],
        [
            "Cauliflower - Graffiti",
            "Plugs",
            "4",
            "2.00"
        ],
        [
            "Cauliflower - Puntoverde",
            "Plugs",
            "5",
            "2.50"
        ],
        [
            "Fall Broccoli - Purple Sprouting",
            "Plugs",
            "6",
            "3.00"
        ]
    ]
}

https://debug.datatables.net/ixiqew

So I get the error and then I click "ok" and it loads most of the data except the first column. I'm just not sure what to do to fix this issue.

This is the JQuery that does the magic at present:

$('#reportrange_items').on('apply.daterangepicker', function(ev, picker) {
    console.log(Date.parse(picker.endDate.format('MMM DD, YYYY')));
    console.log(Date.parse(picker.startDate.format('MMM DD, YYYY')));
    var start_date = Date.parse(picker.startDate.format('MMM DD, YYYY'));
    var end_date = Date.parse(picker.endDate.format('MMM DD, YYYY'));
    var items_data = new Array(start_date,end_date);
    $.ajax({
        url: "php/actions/salesActions.php",
        type: "POST",
        data: {
            sale_items_data: items_data
        },
        dataType: "json",
        success: function(d) {
            //console.log(items_table.table().node().id);
            if (items_table.table().node().id !== 'items-table'){
                    return true;
            }
            items_table.clear().draw();
            items_table.rows.add(d.data); // Add new data
            items_table.columns.adjust().draw(); // Redraw the DataTable
        }
    });

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

There is nothing obvious in the code you posted. Searching the forum for Requested unknown parameter '[object Object]' seems to indicate that [object Object] appears in the error when orthogonal data is being used, for example this thread.

If you still need help please post your Datatables init code. Better is a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

quantasized

Ok, I will try to be more clear and I will check over the thread you suggested.
As my code is on a private server, I will have to make examples on a public space and then I can post here.
Firstly, though, I will check over the other thread and then get clear on any differences with a more exact or targeted question.
Thank you for the response.
I might add, if it wasn't clear yet, that the table loads into the page as might be typical with an iterating loop to display the first and default contents of the table body and then I am wanting to select a date or date range using JQuery daterangepicker to then make an ajax call and PHP to respond with the new data from the DB and to redraw the table with that new data. All this based upon the data or date range selected and matching to the DB records for such data using a time stamp (as that is the way it is in the DB).
Thanks again

quantasized

I realize there is one further thing, the DB "SELECT" query is basically the same from the default to the one using the date range except that with the date range, it uses the additional clause "WHERE stamp BETWEEN 'start_date' AND 'end_date'.
'start_date' and 'end_date' being the translated date selected from the range picker.
Thus far, all seems to be working except that the DataTable is throwing an error with the data provided for the redraw. I followed an example of how the data needed to be fed to the DataTable but I'm still getting an error and the first column is not showing the info provided. The other three columns seem to show (or render) the data correctly. Is this an "orthogonal data" issue? or is it related to the sort order?

allan

I think it is an orthogonal data issue. It looks like you are using data-order as an attribute on the first column. Is that correct? If so, the data structure for each cell in that row is:

{
  "display": "...",
  "@data-order": "..."
}

and the data you send in via the API would need to match that.

I wonder if you might be better Ajax loading the data in the first place (rather than reading it from HTML), then you can just use ajax.reload(). Also, for Ajax orthogonal data, you need the server to respond with the different pieces of data you want for the different actions DataTables takes. See this example for how that can be done.

Allan

quantasized

Thanks allan.
I had been wondering that and was thinking about it again just this morning.
I think I will try just loading it all via ajax rather than loading the first instance out of HTML.
I suspect it will work but I will also report back the findings.

quantasized

Interesting... Well, the first thing I tried before rewiting a bunch of code was remove the "data-order" property of the <td> element in the first column.
I could then add back the "order": [[ 0, "asc" ]] to the JS when loading the DataTable in the first instance.
So, lesson learned that using data-order in the form of >

<td data-order="first-sort-element">......</td>

Does not work when implementing DataTables in the form I have them.
Oh, and thanks allan also for directing me to learn the correct method for markdown here!
Cheers!

allan

It should do - it just requires a bit of extra work when updating the table. If updating is something you need to do, then yes, there are much easier ways!

Allan

canwejustcode

I use

destroy: true

when I need to reload my DT with new data.

$(#tablename).DataTable({ destroy: true })