javascript - jquery datatable 使用表单编辑表格行数据

Question

var tb = $('#example').DataTable();

$('#addRow').on('click', function() {
  var typeName = $("#type option:selected").val();
  var amount = $("#amount").val();
  tb.row.add([typeName, amount]).draw();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<label>Type</label>
<select id="type">
  <option> Type 01</option>
  <option> Type 02</option>
</select>

<label>Amount</label>
<input type="text" id="amount" />
<button id="addRow"> Add </button>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Type</th>
      <th>Amount</th>

    </tr>
  </thead>
</table>

我需要为每一行附加编辑和删除按钮。单击编辑按钮时，行数据应加载到下拉列表和文本框。你能指导我这样做吗？

Answer 1

随着应用程序架构的某些变化，我建议采用以下采用 native DataTables 选项和 API 方法的方法:

//initialize DataTable
const tb = $('#example').DataTable({
  //remove non-essential controls for the sake of cleaner view
  dom: 't',
  //use columns option to setup header titles
  columns: [
    {title: 'Type'},
    {
      title: 'Amount',
      //user 'render' to append Edit/Delete buttons for each entry
      render: data => `${data}<button action="delete">Delete</button><button action="edit">Edit</button>`
    }
  ]
});
//click handler for dual purpose 'Submit' button that adds new rows and submits edits
$('#submit').on('click', function() {
  //when submit button acts to append new row to the table (default)
  if($(this).attr('action') == 'addRow'){
    tb.row.add([$("#type").val(), $("#amount").val()]).draw();
  }
  //when submit button acts to submit edits
  if($(this).attr('action') == 'confirmEdit'){
    //change affected row data and re-draw the table
    tb.row($(this).attr('rowindex')).data([$("#type").val(), $("#amount").val()]).draw();
  }
  //clean up form, switch it to default state
  $('#type').val("");
  $('#amount').val("");
  $('#submit').attr('action', 'addRow');
});
//'Delete' button click handler
$('#example').on('click', 'tbody tr button[action="delete"]', function(event){
  tb.row($(event.target).closest('tr')).remove().draw();
});
//'Edit' button click handler
$('#example').on('click', 'tbody tr button[action="edit"]', function(){
  //get affected row entry
  const row = tb.row($(event.target).closest('tr'));
  //get affected row().index() and append that to 'Submit' button attributes
  //you may use global variable for that purpose if you prefer
  $('#submit').attr('rowindex', row.index());
  //switch 'Submit' button role to 'confirmEdit'
  $('#submit').attr('action', 'confirmEdit');
  //set up 'Type' and 'Amount' values according to the selected entry
  $('#type').val(row.data()[0]);
  $('#amount').val(row.data()[1]);
});

tbody tr button {
  display: block;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<label>Type</label>
<select id="type">
  <option value="" selected></option>
	<option value="Type 01">Type 01</option>
	<option value="Type 02">Type 02</option>
</select>

<label>Amount</label>
<input type="text" id="amount" />
<button id="submit" action="addRow">Submit</button>

<table id="example" class="display" cellspacing="0" width="100%"></table>