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

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

EricVEricV Posts: 2Questions: 0Answers: 0

I have a strange problem in my react project that uses "": "^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('');
export class Tbl extends Component {
componentDidMount() {
this.$el = $(this.el);
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"}]}/>

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

Any idea ?


  • kthorngrenkthorngren Posts: 10,638Questions: 25Answers: 2,428

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

    You have this:

    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.


  • 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 !!!

                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" }
Sign In or Register to comment.