If you mean JQUERY DATATABLE then you can insert input fields (that would still retain the cell data) for every column within your table row as you desire and set the borders of the input field to not display, with css.
EXAMPLE TABLE
<style>
.no-input-border {
border: 'none' !important; background: 'none' !important;
}
</style>
<table id="dynamic_table">
<thead>
<tr>
<th>Name</th>
<th>State</th>
<th>Address</th>
<th>Active</th>
<th>Action</th> <!-- This column would hold your buttons -->
</tr>
</thead>
<tbody>
</tbody>
</table>
EXAMPLE DATATABLE INITIALIZATION
var table = $('#dynamic_table').DataTable({
"order":[[ 0, 'asc' ]], // order by first column
"processing": true,
'paging': true,
'searching': true,
'retrieve': true,
'serverSide': true,
'ajax': {
'url': "your-ajax-url",
'type': 'POST'
},
'columns': [ //every **name:** value must be present in your json
{ data: null, name: 'name'},
{ data: null, name: 'state' },
{ data: null, name: 'address' },
{ data: null, name: 'active' },
{ data: null, name: 'id' } // column that holds your buttons
],
"columnDefs": [
{
"targets": 0, // column that inserts an input field
"data": 'name',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<input type="text" class="no-input-border" name="name" value="'+cellData+'" />'
}
},
{
"targets": 1, // column that inserts an input field
"data": 'state',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<input type="text" class="no-input-border" name="state" value="'+cellData+'" />'
}
},
{
"targets": 2, // column that inserts an input field
"data": 'address',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<input type="text" class="no-input-border" name="state" value="'+cellData+'" />'
}
},
{
"targets": 3, // column that inserts an input field
"data": 'active',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<input type="text" class="no-input-border" name="active" value="'+cellData+'" />'
}
},
{
"targets": 4, // column that holds your buttons
"data": 'id',
"orderable": false,
"createdCell": function (td, cellData, rowData, row, col){
return '<button class="edit_row">Edit<button>'
}
}
],
'responsive': true,
'initComplete': function(settings, json) {
//Run a function when table first initializes
},
'drawCallback': function( settings ) {
//Run a function anytime table reloads when paginating
}
});
EXAMPLE DATATABLE ROW EDIT FUNCTION
$('#dynamic_table tbody').on('click', '.edit_row', function () {
var row = table.row( $(this).parents('tr') ); // row that was clicked
var d = row.data(); // data of the row button that was clicked .eg. console.log(d.name)
var index = row.index();
var json = { // json to be sent
id: d.id,
name: table.cell(index,0).nodes().to$().find('input').val(),
state: table.cell(index,1).nodes().to$().find('input').val(),
address: table.cell(index,2).nodes().to$().find('input').val(),
active: table.cell(index,3).nodes().to$().find('input').val()
}
/*Your Ajax Function Here*/
});
RELOAD DATATABLE FUNCTION
table.ajax.reload( function ( json ) {
//Run function after table reloads
});
