Если вы имеете в виду JQUERY DATATABLE, вы можете вставить поля ввода (которые по-прежнему сохранят данные ячейки) для каждого столбца в строке таблицы по вашему желанию и установить границы поля ввода, чтобы они не отображались, с помощью css.
ПРИМЕР ТАБЛИЦЫ
<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>
ПРИМЕР ИНИЦИАЛИЗАЦИИ ДАННЫХ
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
}
});
ПРИМЕР ФУНКЦИИ РЕДАКТИРОВАНИЯ СТРОКИ ДАННЫХ
$('#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*/
});
ФУНКЦИЯ ПЕРЕЗАГРУЗКИ ДАННЫХ
table.ajax.reload( function ( json ) {
//Run function after table reloads
});
person
Ikechukwu
schedule
03.07.2019
