How to add multiple blank rows based on the input of a text box?

jbrofser

$(function(){
$("#addRowButton").click(function(){

 alert("Click event works");
 var n =  parseInt($("#numberOfRowsTextBox").val(), 10); 
 var i=0;
 var t = $("#example").DataTable();
 alert("We got to the loop");
 for(var i; i < n; i++){
 t.rows.add(['(blank)','(blank)','(blank)','(blank)','(blank)']).draw( false );   
 }
 }); 

});

Here is my code snippet - I have no errors in my console. any idea?

thanks,
J

kthorngren

The data being adding needs to be the same structure as the current data. The docs for rows.add() explains it better.

Kevin

jbrofser

 $(document).ready(function() {

$('#example').DataTable({
            "select" : {
            "style" : 'single',
            "items" : 'row'
          },
          "columns" : [
              {"data" : ''}, 
              {"data" : ''}, 
              {"data" : ''}
          ]
        });

$("#addRowButton").click(function(){
    
     var t = $("#example").DataTable();
     t.row.add({"data": '',"data": '',"data": ''}).draw();   
     
     }); 
});

So this is where I am now. The error I get is t.row is undefined. Now I am just trying to add one row and I thought I made it the same dataType, What am I not seeing?

kthorngren

The table isn't being loaded due to a misconfiguration of your columns definition. You need to name each column as shown in these examples:
https://datatables.net/reference/option/columns.data#Examples

Then in your function you need to change "data", in add, to the names in the columns definition.

Kevin

jbrofser

Thanks Kevin, I know I am close, for some reason the table still is not being constructed correctly as I get that t.row is still undefined:

 $(document).ready(function() {

var t = $('#example').DataTable({
            "select" : {
            "style" : 'single',
            "items" : 'row'
          },
          "columns" : [
              {"data" : 'test1'}, 
              {"data" : 'test2'}, 
              {"data" : 'test3'}
          ]
        });

$("#addRowButton").click(function(){
     t.row.add({"test1": '',"test2": '',"test3": ''}).draw();   
     }); 
});

I moved the initialization of the T variable to the top.

jbrofser

I am not sure if
A. The issue is because I want to add blank rows.
B. I actually have 5 columns in my html table, but the last two are checkboxes that should remain empty...so I am only passing 3 columns in my add function...not sure if that makes a differerence.

I will keep trying different things.

Thank you

kthorngren

You will need to add all 5 columns. Set the checkbox columns to 0 or whatever and let the render function display the checkboxes.

You can always post a test case to get help.

Kevin