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 ?

Yevhen Horbunkov · Accepted Answer · 2019-06-14 09:51:56Z

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>

shrys · Accepted Answer · 2019-06-14 06:43:31Z

3

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>

edited Jun 14, 2019 at 6:43

answered Jun 14, 2019 at 5:42

shrys

5,9682 gold badges26 silver badges38 bronze badges

6 Comments

kumara Over a year ago

why did u use, another dropdown and textbox. can not we use one set

shrys Over a year ago

Yes we can, I just wanted to show that it can be done. Does this answer your original question?

Yevhen Horbunkov Over a year ago

Despite this answer being accepted it DOES NOT solve the initial problem - table rows are not getting either edited or deleted with that code. Moreover, there's a native DataTables option columns.render that can be used to append those buttons and native DataTables API methods to edit delete table data. You may refer to this solution for proper approach.

shrys Over a year ago

@U25lYWt5IEJhc3RhcmQg thank you for clarification, I'm not familiar with API.

kumara Over a year ago

@U25lYWt5IEJhc3RhcmQg your solution is great. its with inline editing feature. I need to load data to the data insertion form. check above image. do u know how to do it?

|

Hellma · Accepted Answer · 2020-05-28 11:15:46Z

RowEditor.js

I had a similiar issue and wrote a tiny JS tool, that targets editing of rows inline. The repo can be found here. I think its functionality is best described by the picture below, but you can also find a running example here.

Setting it up

What you have to do to integrate it, is

Download and integrate the file

<script type="text/javascript" charset="utf8" src="/js/RowEditor.js"></script>

Set up a configuration about which columns shall be editable and if they should be editable as dropdown or input (compare it to the example picture, you will quickly figure out what it does):

       "1":{"type":"input"},
       "2":{"type":"input"},
       "3":{"type":"select",
           "options":{
               "1":{"value":'Sales Assistant', "title":'Sales Assistant'},
               "2":{"value":'Tech Lead', "title":'Tech Lead'},
               "3":{"value":'Secretary', "title":'Secretary'},
               "4":{"value":'Developer', "title":'Developer'},
               "5":{"value":'Trainee', "title":'Trainee'}
           }
       }
}

Call the editor, after you have initialized your DataTable:

$(document).ready( function () {
    table = $('#table').DataTable();
    rowEditor = new RowEditor('#table', table, editRowSettings);    
});

Call the function editRow of rowEditor (or however you have named it above) with the index of the row you want to edit. I have the button placed in a sepperate column of the datatable, but you can call it anyway you want it. <button onclick="rowEditor.editRow(1)">Edit</button>

If you have questions, feel free to ask or issue a pull request :)

Collectives™ on Stack Overflow

jquery datatable edit table row data using form

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related