How do I set the default attributes for my cells when there is no initial data

Question

I have a scenario where I am filling my data table based on data received over a websocket. So I guess the best approach would be to create an empty table in html and then add the data via the API.

So say I want my final table to appear something like:


    
        
            Name
            Position
            Office
            Age
            Start date
            Salary
        
    
    
        
            Tiger Nixon
            System Architect
            Edinburgh
            61
            2011/04/25
            $320,800
        
        
            Garrett Winters
            Accountant
            Tokyo
            63
            2011/07/25
            $170,750

When dynamically loading my table I would only define the first part:


    
        
            Name
            Position
            Office
            Age
            Start date
            Salary

And then call row.add() in my javascript as the data is received.

But how do I set the default classes for my column cells this way?

user_12567365 · Answer

When you use row.add(), the return value is the newly created (but not yet displayed) row.

You can use this value to iterate over the cells in the row, where class names can be added. Finally you can draw the row, so it is displayed.

The following shows the basic approach, where we have a pre-defined array of the class names you want to handle:

  $(document).ready(function() {
  
    var classNames = [ 'name', 'position' ];
 
    var table = $('#example').DataTable();
    
    var row = table.row.add( ['Quinn Flynn', 'Accountant'] );
    var i = 0;
    row.cells().every( function () {
    var node = this.node();
      $( node ).addClass( classNames[i++] );
    } );
    row.draw();

  });

That final section of code from row creation to the row draw would be placed in a function, in your case.

This produces an HTML body as follows:


    
        Quinn Flynn
        Accountant

How do I set the default attributes for my cells when there is no initial data

1 Answers