Can't access tbody with id with jquery

pmiguel

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Hi
I have a datable which is populated from a javascript file. I added an id to tbody like so:

  <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>From</th>
                                            <th>Subject</th>
                                            <th>Body</th>
                                            <th>Folder</th>
                                            <th>Prediction</th>
                                            <th>%</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">   
                                    </tbody>
                                </table>

The reason why i'm doing this, is because i needed to populate the table from different sources. The table renders fine in the browser.

But now, i want to use some of the datatable included functionalities, like pagination, ellipsis (using the cdn plugin) and export data as CSV (also using cdn plugins), but none is working.

I have made it work with a different dummy example where i hardcoded the table in the html (so, no tbody id).

But with my current example i just can't make it work. Can someone please give me some help?

Here is my script to render the datatable (i ommit the other js file because it's passing data ok to my table)

$(document).ready( function () {
    $('#dataTable').DataTable({
      autoWidth: true,
       dom: 'lBftrip',
       buttons: [
        'csv',
        ], 
      columnDefs: [
        {
          targets: 3,
          render: function(data, type, row) {
            if ( type === 'display') {
              return $.fn.dataTable.render.ellipsis(10)(data, type, row);            
            }
            return data;
          }
        }
      ]
   
    });

kthorngren

How are you adding the data to the table? Please see this faq about options to add the data. The preferred method is to use rows.add().

Kevin

pmiguel

thanks for your help @kthorngren . I have a function which uses axios() to make requests to the server. When the data is fetched i bind each object property to the column i want to associate it with.

i then make it accessible to my html using this, when the function is called

document.getElementById('tableBody').innerHTML = tableText;

where 'tableBody' is the tbody id tag of the datatable and 'tableText' will pass each object property value to datatable columns, accordingly

I will take a look at what you suggested

allan

Yeah, you really don’t want to be doing that ;-). The problem with that approach is that DataTables doesn’t have any kind of listeners on the DOM, so it doesn’t “know” that you’ve changed the data in the table body. You could destroy the old DataTable instance and create a new one, but I think you’d be better served using the DataTables API methods.

Allan

pmiguel

@allan thanks, i'll refactor my code and change the approach. And i'll look more into the documentation, as i should have done from the start Thanks for your help