CODEWITHSUNDEEP
jqueryhtmldatatables
madhu
madhu

Reputation: 1018

How to add data to table dynamically using JQuery

I have 3 dropdowns and a button "Add", when i select the dropdowns and click on add, it has to insert into a table using JQuery and DataTables.How will i add rows dynamically? I have done using a for loop iteratin a list and then adding to the datatable but thisis different.pls help me in this regard,

 function addToTable(){

     var project = document.getElementById("projectId").value;
     var process = document.getElementById("glbProcessId").value;
     var role = document.getElementById("roleId").value;

            var t = $('#example').DataTable();


            $('#addRow').on( 'click', function () {
                t.row.add( [
                   // ##### how do i add the data here???##############
                ] );


            } );

 }

Thanks in advance

Upvotes: 1

Views: 2506

Answers (1)

Rohit Arora
Rohit Arora

Reputation: 2252

For example, I have just added static values in it: 

$('#addRow').on( 'click', function () {
   t.row.add( [
      "1st Column's data",
      "2nd Column's data",
      "3rd Column's data",
      "4th Column's data",
       //and so on as based on number of your columns
   ]).draw();
});

If you want to add dynamic values, you can add an Ajax function above t.row.add line and then pass those values instead of static values.

For more reference see this example.

Upvotes: 3

Related Questions