DataTable add new rows with for loop

Question

Hello everybody

I have a question about DataTable and their API about add new row. I'm using DataTable with a jQuery with ES5 ( Yes, I need that combination).

I have a button with a function what I called 'addNewRow' ( yea it's obvious). If I click on this button is showing a modal with input where I can put some data like name, salary etc and implement that to my DataTable but is any possible way to make it more dynamically? Because every time I have to add a new line code in my js file in a row.add() when I want to make a new column and add a new input to HTML modals.

Here is an example:


    $buttonWrapper.on('click', '.addButton', function (){
    
    $table = $('table').DataTable();
    
    $table.row.add([
       
    $modal.find('input').eq(0).val(),
    $modal.find('input').eq(1).val(),
    $modal.find('input').eq(2).val()
    
    ]).draw();
    
    });

I want to have something with the loop like that:


    $buttonWrapper.on('click', '.addButton', function (){
    
    $table = $('table').DataTable();
    $theadTr = $('table thead tr');
    
      for(var i = 0; i < $theadTr.length; i++){
    
       $table.row.add([
       
       $modal.find('input').eq(i).val()
      
      ]).draw();
     }
    
    });

I know it will be added each time row.add() cause it depends on length. I tried also implement in row.add() function as a method but it doesn't work (probably doesn't exist something like that on free version). I also tried to add.rows() but it dosen't work too. Thanks for any advice.

shajji shajji · Accepted Answer · 2019-01-08T11:25:17

Hope this help.

$buttonWrapper.on('click', '.addButton', function (){
    var newRow = [];
    $table = $('table').DataTable();
    $theadTr = $('table thead tr');
    for(var i = 0; i < $theadTr.length; i++){
       newRow.push($modal.find('input').eq(i).val());
   }
   $table.row.add(newRow).draw();
});

DataTable add new rows with for loop

Hello everybody

1 Answers