將表單數據插入Jquery Datatable

Question

我正在嘗試將數據插入到jQuery Datatable。 但是沒有正確插入。

 $(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> 

我提醒下拉列表和文本框值。 運作良好。 我認為將記錄插入到數據表中時會出現問題。 如果您知道任何解決方案，請提及。

Answer 1

您需要將變量移動到點擊處理程序中，否則它們將在頁面加載時設置，並且在更改值后不會更新。

$(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();
  });
});

更新的代碼段：

 $(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>