繁体   English   中英

将表单数据插入Jquery Datatable

[英]Insert Form data to Jquery Datatable

我正在尝试将数据插入到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> 

我提醒下拉列表和文本框值。 运作良好。 我认为将记录插入到数据表中时会出现问题。 如果您知道任何解决方案,请提及。

您需要将变量移动到点击处理程序中,否则它们将在页面加载时设置,并且在更改值后不会更新。

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM