Can't access tbody with id with jquery

Can't access tbody with id with jquery

pmiguelpmiguel Posts: 3Questions: 1Answers: 0

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;
          }
        }
      ]
   
    });

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736
    Answer ✓

    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

  • pmiguelpmiguel Posts: 3Questions: 1Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • pmiguelpmiguel Posts: 3Questions: 1Answers: 0

    @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

This discussion has been closed.