DataTable

by Anthony Fernando Torres Detquizan

HTML

<div class="container-fluit">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <buttom class="btn btn-danger" style="width: 100%; margin-bottom: 10px;" id="addRow">AGREGAR</buttom>
      </div>
      <div class="col-md-12">
        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
              <th>Column 4</th>
              <th>Column 5</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
              <th>Column 4</th>
              <th>Column 5</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function() {
  var t = $('#example').DataTable();
  for (var i = 0; i < 50; i++) {
   if(i == 2){
   		 t.row.add([
      '23123123',
      i + '.2',
      i + '.3',
      '<input type="text">',
      '<buttom class="btn btn-danger" style="margin-bottom: 10px;" id="addRow">AGREGAR</buttom>'
    ]).draw(false);
   
   }else{
   	 t.row.add([
      i + '.1',
      i + '.2',
      i + '.3',
      '<input type="text">',
      '<buttom class="btn btn-danger" style="margin-bottom: 10px;" id="addRow">AGREGAR</buttom>'
    ]).draw(false);
   }
  }

  /*var counter = 1;

  $('#addRow').on('click', function() {
   

    counter++;
  });

  // Automatically add a first row of data
  $('#addRow').click(); */
});