jquery datatable edit table row data using form

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>

i need to append edit and delete button for every row. when click the edit button, row data should load to dropdown and textbox. can u guide me to do this ?

Answer 1

Add your HTML directly. I've added button, you can similarly add a drop down too. Consider the following:

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

$('#addRow').on('click', function() {
  var typeName = $("#type option:selected").val();
  var amount = $("#amount").val();
  var row = tb.row.add([typeName, amount, "<span><button>Edit</button><button>Delete</button></span>"]).draw();
  var edit = row.node().getElementsByTagName("button")[0];
  edit.onclick = function() {
    document.getElementById('typeEdit').value = row.data()[0];
    document.getElementById('amtEdit').value = row.data()[1];
  }
});

<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>
<br/ >
<br/ >
Edit Type
<select id="typeEdit">
  <option> Type 01</option>
  <option> Type 02</option>
</select>
Edit Amount
<input id="amtEdit" />
<br/ >
<br/ >
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Type</th>
      <th>Amount</th>
      <th>Ops</th>
    </tr>
  </thead>
</table>

Answer 2

With certain changes to the architecture of your app, I would suggest the following approach that employs native DataTables options and API methods:

//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>