First time using dataTables. (No data available in table)

vivtan1995

Hi I am trying to load a small (5000 lines) text file onto dataTable using React. The text file is loaded using ajax and PHP from a remote server. It kept having "No data available in table" error. It used to work when the text file was in local file but no longer worked after implementing PHP and reading file from remote server.

Code in initializing dataTable in HTML:

<script type="text/javascript" language="javascript" class="init">
    $(document).ready( function () {
      $('.table').DataTable( {
        "lengthMenu": [ [10, 50, 100, -1], [10, 50, 100, "All"] ],
      });
    } );
</script>

Code in body of table in JS file:

            <tbody>
                {finalSymbolArray.map((symbol, index) => {
                    return(
                        <tr key={symbol.id}>
                            <td>{symbol.id}</td>
                            <td>{symbol.name}</td>
                            <td>{symbol.version}</td>
                            <td>{symbol.comment}</td>
                            <button
                             onClick={() =>this.openModal(index, symbolArrayTemp)}>
                                Tag
                            </button>
                        </tr>
                    );
                })}
            </tbody>

AJAX code to get data from server:

    window.setInterval(() => {
        this.checkContent();
    }, 3100);

  checkContent () {
    var tempText;
    $.ajax({
      url: "http://localhost/phpRoot/readFile.php",
      type: "GET",
      dataType: "text",
      success: function(data) {
          // console.log('success1');
         this.setState({ tempText: data });
      }.bind(this),
      error: function(xhr, status, err) {
          console.log('error');
      }.bind(this)
    });

    if(this.state.tempText !== this.state.text){
      this.setState({ text: this.state.tempText });
      // console.log(this.state.text);
      // this.refreshSlideShow();
    }


  }

After reading from somewhere, if i set a timeout for initializing the dataTable, it will work initially but will have an error of "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node." and the website crashed.

Sorry if my question is not very clear, i will answer all your queries if you have any. Hopefully someone can help me please thank you very much!

colin

Hi @vivtan1995 ,

It looks like the data is being added to the table behind DataTables's back - so it has no knowledge of it.

Probably the easiest way would be to move the ajax into the DataTables initialisation - that way it will deal with the data collection. See the examples here, they'll help.

Hopefully that'll get you going!

Cheers,

Colin

kthorngren

The issues is due to the async nature of ajax. Due to this Datatables is initializing before the table is populated. As Colin mentioned Datatables isn't aware that the table has changed. You could try using the ajax as Colin mentioned and that is usually best. But you would need to change how it is structured.

Alternatively you could move the Datatables initialization into the success portion of your current ajax request. This way it is initialized after you place the data into the table.

Kevin

vivtan1995

Thank you 2 so much for replying!

@kthorngren , I am currently trying to initialize in the ajax request but am faced with jquery.dataTables.js:3093 Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined, which is weird since i did not add or remove any table headers. Is there a chance you might know which is this so?

vivtan1995

Sorry, the error in the previous comment is cleared. However, now I have an error of
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. after the data is set inside the dataTable. This error seems to keep appearing for the number of lines of data i have.

Does anyone know why this is happening?

vivtan1995

Sorry the errors are fixed! The dataTable is running smoothly now. Thank you all so much!