Add new row , edit and delete in Data table

data table is enable to responsive with all data more than normal table..

In case mine, i use Ajax with data table for show all data from database but i want to add , edit and delete data on screen before sent new data in data table to database.

picture from https://datatables.net/

You can import library data table from this website https://datatables.net/

1. Send ajax for show data as data table

First, let’s create table with id name table you want

<table id=”ployTable” class=”table table-striped table-bordered dataTable-content” cellspacing=”0" width=”100%”>
<thead>
<tr>
<th>date</th>
<th>name</th>
<th>action</th>
</tr>
</thead>
</table>

In this case, i create data table id name “ployTable”.We will see it has only column name in tag <th></th> but not need to put data in tag <td></td> suddenly.Data on each column will response and show from Ajax follow index

I create button “search” for send some input which is the important key for query in database.For example, i select date on today and then click “search”

Ajax for send and show data is below

All data from Ajax will show as <td></td> in table body in your table.You will notice it can set each column to be visible on invisible like you use <td style=”display:none”></td> and show button in column

2. About button action that you create in data table
In this case i have 2 buttons, editBtn and deleteBtn. If you want to send command for do something on that row.I can recommend you to use:

$(‘#ployTable’).on(“click”, “.edit”, function () {
});

AND

$(‘#ployTable’).on(“click”, “.delete”, function () {
var table = $(‘#ployTable’).DataTable();
table.row($(this).parents(‘tr’)).remove().draw(false); //command for delete all that row
});

About edit button if you want to get each column in that row for change data.You can use data Object as below:

var data = table.row($(this).closest(‘tr’)).data();
var date= data[Object.keys(data)[0]];
var name= data[Object.keys(data)[1]];

var rowNumber = table.row($(this).closest(‘tr’)).index(); //for check the index of row that you want to edit in table

You can use command for edit data on that row as below

var date = $(“#date”).val();
var name = $(“#name”).val();

table
.row(rowNumber)
.data([date, name,
‘<button id=”editBtn” class=”btn btn-wrang btn-flat edit” name=”editBtn” type=”button”>Edit</button>’ +
‘&nbsp;&nbsp;<button id=”deleteBtn” class=”btn btn-danger btn-flat delete” name=”deleteBtn” type=”button” disabled >Delete</button>’
])
.draw();

3. When you want to add data into data table.You can make one button for create and then fill input follow amount of column in table, use command for add new row with data as below

table.row.add([date, name,
‘<button id=”editBtn” class=”btn btn-wrang btn-flat edit” name=”editBtn” type=”button”>Edit</button>’ +
‘&nbsp;&nbsp;<button id=”deleteBtn” class=”btn btn-danger btn-flat delete” name=”deleteBtn” type=”button”>Delete</button>’
])
.draw()
.node();

4. For get all data you do in data table,you can use

var form_data = table.rows().data();
var f = form_data;
for(var i=0; f.length > i; i++) {
console.log(f[i]); }

Let’s try with your project.Thank you for visit my blog ^^