Insert Form data to Jquery Datatable

Question

I am trying to inserting data to jquery Datatable. But it did not insert correctly.

 $(document).ready(function() { var t = $('#example').DataTable(); var branchName = $("#branchName option:selected").val(); var accountNo = $("#accountNo").val(); $('#addRow').on('click', function() { t.row.add([branchName, accountNo]).draw(); }); }); 

 <link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script> <div class="form-group"> <label class="control-label col-sm-4">Branch</label> <div class="col-sm-8"> <select class="form-control" name="branches" id="branchName"> <option>--Select--</option> <option value="C01">C01</option> <option value="C02">C02</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-4">Account No.</label> <div class="col-sm-8"> <input type="text" class="form-control" id="accountNo" name="accountNo"> </div> </div> <div class="form-group"> <label class="control-label col-sm-4"></label> <div class="col-sm-8"> <button type="button" class="btn btn-primary-action" id="addRow"> Add to Grid</button> </div> </div> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Branch</th> <th>Acc. No.</th> </tr> </thead> </table> 

I alerted drop down and text box value. It's working well. I think there is an issue when record insert into data-table. If you know any solution please mention.

Answer 1

You need to move the variables into the click handler, otherwise they are set on page load and not updated after you change the values.

$(document).ready(function() {
  var t = $('#example').DataTable();

  $('#addRow').on('click', function() {
    var branchName = $("#branchName option:selected").val();
    var accountNo = $("#accountNo").val();
    t.row.add([branchName, accountNo]).draw();
  });
});

Updated snippet:

 $(document).ready(function() { var t = $('#example').DataTable(); $('#addRow').on('click', function() { var branchName = $("#branchName option:selected").val(); var accountNo = $("#accountNo").val(); t.row.add([branchName, accountNo]).draw(); }); }); 

 <link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script> <div class="form-group"> <label class="control-label col-sm-4">Branch</label> <div class="col-sm-8"> <select class="form-control" name="branches" id="branchName"> <option>--Select--</option> <option value="C01">C01</option> <option value="C02">C02</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-4">Account No.</label> <div class="col-sm-8"> <input type="text" class="form-control" id="accountNo" name="accountNo"> </div> </div> <div class="form-group"> <label class="control-label col-sm-4"></label> <div class="col-sm-8"> <button type="button" class="btn btn-primary-action" id="addRow"> Add to Grid</button> </div> </div> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Branch</th> <th>Acc. No.</th> </tr> </thead> </table>