2

Hi I am new to jquery and trying to dynamically add row dynamically using the button from another datatable row.

Is there any easy way that using the row.add() function to create a row with button and input text like the below tr ?

<tr>
<td> <button type="button" class="btn green btn-xs select-row" data-id="7" data-includeTax="N">btn</button>
</td>
<td>1</td>
<td>2</td>
<td><input type="text" ></td>
<td>3</td>

enter image description here im trying to call function similar to below on onclick event

saleDetailDT.row.add([..... ? ]).draw();

superted
  • 315
  • 1
  • 8
  • 21

2 Answers2

6

Try something like this: 

 <script>
   $('#dataTables').DataTable();
   $(document).on("click","#your_element_id",function(){ 
     var table = $('#dataTables').DataTable();
     table.row.add(['<button type="button" class="btn green btn-xs select-row" data-id="7" data-includeTax="N">btn</button>','1','2','<input type="text">','3']).draw();
     // table.row.add([first_td_html_of_tr,second_td-html_of_tr,third_td_html_of_tr,...nth td_html_of_tr]).draw();
   });

 </script>

And dont forget to give your table id="datatables" as below.

<table id ="datatables">
  //
</table>
Manohar Khadka
  • 2,186
  • 2
  • 18
  • 30
  • do you have loaded script for jquery and datatables ?? is there any error on console ? and have yo replaced "#your_element_id" by your id ?? – Manohar Khadka Nov 17 '16 at 01:59
0

Maybe you are searching for something like:

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

Please see Add table row in jQuery

Community
  • 1
  • 1
Daidon
  • 581
  • 1
  • 3
  • 14