Datatable doesn't display data...but hardcoded data works !!

EricV

Hello,
I have a strange problem in my react project that uses "datatables.net": "^1.10.21".
I defined a react component called Tbl that uses Datatables and that accepts a props to get the data that have to be displayed.
Here a part of the code of my Tbl component
$.DataTable = require('datatables.net');
export class Tbl extends Component {
componentDidMount() {
this.$el = $(this.el);
this.$el.DataTable(
{
data: this.props.dataForTable,
...}
}
When I call this Tbl component in the view, I'm able to see the expected result... only when the prop value is hardcoded
<Tbl dataForTable={[{ "uid" : "11111","key1":"value1","key2":"value2"},{ "uid" : "11112","key1":"value11","key2":"value22"}]}/>

Note
My data source type is an object formatted like that :
[{ "uid" : "11111","key1":"value1","key2":"value2"},{ "uid" : "11112","key1":"value11","key2":"value22"}]
According the documentation, this type is accepted by the "data" field of a DataTable object.

When I want to display the fetching records from my database, the data are not displayed....even if the is it the same format as the hardcoded one !!!!
I only changed...
<Tbl dataForTable={dataFetchingResult}/>
Here the dataFetchingResult content that is displayed in the view using
{
{JSON.stringify(dataFetchingResult)}
}

Any idea ?

kthorngren

I'm not familiar with the framework you are using but my guess is the problem is with order of operations.

You have this:

this.$el.DataTable(
{
data: this.props.dataForTable,
...}

If you are fetching the data via an asynchronous process you need either initialize the Datatable in a callback for the process after the response or use rows.add() in the callback to add the row fetched rows.

For help debugging please post a link to your page or a test case replicating the problem so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

EricV

Hello Kevin,
Thank you for your answer. You put me on the right path.
Actually, because the data are fetched via an asynchronous process, i tried to call **directly ** this asynchronous process from my object Datatable using the "ajax" object...and that worked !!!

 this.$el.DataTable(
        {

            ajax: {
                url: "http..........",
                dataSrc: 'Items'
              },
              processing: true,

            columns: [
                { title: "Uid", data :"uid" },
                { title: "Date and time",  data: "dateAndTime"  },
                { title: "TransactionID", data: "transactionID"  },
                { title: "ServiceName", data: "serviceName" },
                { title: "LogMessage", data: "logMessage" },
                { title: "Type", data: "type" }
                    ]
...}