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

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>

Answer 2

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 3

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

1. Download and integrate the file

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

2. 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'} } } }

3. Call the editor, after you have initialized your DataTable:

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

4. 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 :)