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

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

EricVEricV Posts: 2Questions: 0Answers: 0

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 ?

Replies

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

    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

  • EricVEricV Posts: 2Questions: 0Answers: 0

    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" }
                        ]
    ...}
    
This discussion has been closed.