xxxxxxxxxx
const table = $("#tableId").DataTable();
table.rows().every( function() {
const node = this.node(); // html node -- tr
const row = $(node).find('td:eq(2)'); // 3rd (0-index) column -- td
}
datatables update data dynamically
xxxxxxxxxx
$.get('myUrl', function(newDataArray) {
datatable.clear();
datatable.rows.add(newDataArray);
datatable.draw();
});
xxxxxxxxxx
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "../php/staff.php",
table: "#example",
fields: [ {
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Extension:",
name: "extn"
}, {
label: "Start date:",
name: "start_date",
type: "datetime"
}, {
label: "Salary:",
name: "salary"
}
]
} );
// Activate an inline edit on click of a table cell
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "../php/staff.php",
order: [[ 1, 'asc' ]],
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "first_name" },
{ data: "last_name" },
{ data: "position" },
{ data: "office" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
xxxxxxxxxx
// Assume you have an HTML table with the id "myTable"
// Each row may have an "edit" button to initiate editing
$(document).ready(function() {
// Bind click event to all "edit" buttons in the table
$('#myTable').on('click', '.edit-row', function() {
// Get reference to the current row
var currentRow = $(this).closest('tr');
// Extract values from the row cells, assuming each cell has a "data-*" attribute to identify the field
var column1Value = currentRow.find('[data-column="column1"]').text();
var column2Value = currentRow.find('[data-column="column2"]').text();
// ... and so on for other columns
// Example of opening a modal or a form for editing the data
openEditForm(column1Value, column2Value);
});
// Function to handle opening/editing the row data
function openEditForm(column1Value, column2Value) {
// Your implementation here, which could be opening a modal or a form
// with fields pre-populated with the row's data, allowing the user to edit it
console.log('Edit form opened with column values:', column1Value, column2Value);
}
});