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>

将表单数据插入Jquery Datatable

1 个答案: