Dynamically pass dataSrc to be able to reload the table ?

Dynamically pass dataSrc to be able to reload the table ?

skeyzzoskeyzzo Posts: 3Questions: 1Answers: 0

Hello,

I know what we are doing is not very standard, but i am looking for a way to reload our table without losing the context of the current page, ordering etc.
When I say this is not standard, we are actually not building our Datatable using

$('#example').dataTable( {
    ajax: "data.json"
} );

Instead, we are doing an ajax call and in the success we inject the data when building the DT.

I would like to know if it is possible to use ajax.reload() dynamically.

I have been able to do :

table.ajax.url('/api/getItems');

In order to set the correct url, I can see on the network that the call is executed and I have the same response as when initializing the page (ie the response is a correct json)

But I have the error

jquery.dataTables.js:7584 Uncaught TypeError: Cannot read property 'length' of undefined
at jquery.dataTables.js:7584
at callback (jquery.dataTables.js:3864)
at Object.success (jquery.dataTables.js:3894)
at fire (jquery.js:3232)
at Object.fireWith [as resolveWith] (jquery.js:3362)
at done (jquery.js:9840)
at XMLHttpRequest.callback (jquery.js:10311)

I am guessing this is because the response is an array of objects like in this example : https://datatables.net/manual/ajax#Data-array-location

I tried to force the parameter

table.ajax.dataSrc = ""

both at initialization (even if not using the ajax built-in tool) or just before doing the reload :

table.ajax.url('/api/getItems');
table.ajax.dataSrc = "";
table.ajax.reload(null, false);

I am still getting the same error, eventhough the response is correct and I wonder if this can actually be done this way...

I hope I am clear enough on my problem, don't hesitate if you have any questions :)

Answers

  • skeyzzoskeyzzo Posts: 3Questions: 1Answers: 0

    Forgot to mention I am using datatables.net v1.10.18

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Your code works in this example:
    http://live.datatables.net/xegokuma/1/edit

    Note the dataSrc in the example is data but you should still use what you need table.ajax.dataSrc = "";.

    Uncaught TypeError: Cannot read property 'length' of undefined

    My first thought it to check the JSON response in the browser's developer tools. Make sure its a valid JSON string and that it matches the data structure of the table.

    Kevin

  • skeyzzoskeyzzo Posts: 3Questions: 1Answers: 0

    Hello and thank you for your answer.

    According to your example, this should works.

    Unfortunately, the JSON response is valid (I used https://jsonlint.com/ ) so I have no clue what I should try next...

    For the record, here is a sample of my response but I don't think this helps :

    [{
            "id": "xxx",
            "anotherId": "yyy",
            "input": null,
            "yetAnotherId": "zzz",
            "date1": "2018-12-02T10:35:02.538Z",
            "date2": "2018-12-02T10:35:02.538Z",
            "timeout": "01:00:00",
            "obj1": {
                "type": "type1",
                "id": "xxxxx"
            },
            "obj2": {
                "date": "2018-12-02T10:35:10.284Z",
                "string": "string",
                "data": null
            }
        }, {
          ...
        }
    ]
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Its good to see the example JSON response. But without seeing how you have your Datatables setup its hard to say. Are you using columns.data to define the columns? If not you will for Datatables to use this data.

    Please post your datatables init code.

    Kevin

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @fiks ,

    ajax.dataSrc can be a function, see the last example on that page. You can therefore use logic in that function to return the correct data.

    Cheers,

    Colin

  • fiksfiks Posts: 15Questions: 2Answers: 0

    Hi Colin, in my datatable initialization, I don't use dt.ajax. I use jquery.ajax before initialization to collect table data prior and then on success use JSON to create columns then I initialize my dt. So I don't have access to ajax to use ajax function.

    Isn't there a way to set it the way below:

    dt_instance.ajax.dataSrc = "";
    
  • fiksfiks Posts: 15Questions: 2Answers: 0

    ...looks like my post before yours Colin has disappeared...

  • fiksfiks Posts: 15Questions: 2Answers: 0

    Hi skeyzzo, did you manage to your dataSrc problem above? I ran into the same issue.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited May 2019

    Not sure what the original question was, since it sounds like the post is gone. Unless you are using the ajax option to fetch the table data then setting the ajax.dataSrc won't have an affect.

    Maybe you can use the initial jQuery ajax request for the column info then in the success function configure the columns as you normally do then use ajax to fetch your data.

    Something like this example:
    http://live.datatables.net/qimukefe/1/edit

    It is using server side processing but you don't need to.

    Kevin

This discussion has been closed.