107 lines
2.7 KiB
JavaScript
107 lines
2.7 KiB
JavaScript
// **------ Table 1 ------**
|
|
$(function () {
|
|
$('#example').DataTable();
|
|
$('#example1').DataTable();
|
|
});
|
|
|
|
$(function () {
|
|
$('#example2').DataTable({
|
|
dom: 'Bfrtip',
|
|
buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
|
|
});
|
|
});
|
|
|
|
$(function () {
|
|
$('#example3').DataTable({
|
|
createdRow: function (row, data) {
|
|
const salary = parseFloat(data[5].replace(/[\$,]/g, ''));
|
|
if (salary > 150000) {
|
|
$('td', row).eq(5).addClass('highlight');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
/* Formatting function for row details - modify as needed */
|
|
function format(d) {
|
|
return `
|
|
<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
|
|
<tr>
|
|
<td>Full name:</td>
|
|
<td>${d.name}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Extension number:</td>
|
|
<td>${d.extn}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Extra info:</td>
|
|
<td>And any further details here (images etc)...</td>
|
|
</tr>
|
|
</table>`;
|
|
}
|
|
|
|
$(function () {
|
|
const table = $('#example4').DataTable({
|
|
ajax: '../assets/vendor/datatable/ajax/objects.txt',
|
|
rowId: 'id',
|
|
columns: [
|
|
{
|
|
className: 'dt-control',
|
|
orderable: false,
|
|
data: null,
|
|
defaultContent: ''
|
|
},
|
|
{ data: 'name' },
|
|
{ data: 'position' },
|
|
{ data: 'office' },
|
|
{ data: 'salary' }
|
|
],
|
|
order: [[1, 'asc']],
|
|
dom: 'Blfrtip',
|
|
buttons: ['createState', 'savedStates']
|
|
});
|
|
|
|
// Open/close row details
|
|
$('#example4').on('click', 'tbody td.dt-control', function () {
|
|
const tr = $(this).closest('tr');
|
|
const row = table.row(tr);
|
|
|
|
if (row.child.isShown()) {
|
|
row.child.hide();
|
|
} else {
|
|
row.child(format(row.data())).show();
|
|
}
|
|
});
|
|
|
|
$('#example4').on('requestChild.dt', function (e, row) {
|
|
row.child(format(row.data())).show();
|
|
});
|
|
|
|
table.on('stateLoaded', (e, settings, data) => {
|
|
for (let i = 0; i < data.childRows.length; i++) {
|
|
const row = table.row(data.childRows[i]);
|
|
row.child(format(row.data())).show();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Delete btn JS
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const table = document.querySelector('table');
|
|
|
|
if (table) {
|
|
table.addEventListener('click', (event) => {
|
|
const target = event.target;
|
|
|
|
if (target.classList.contains('delete-btn')) {
|
|
const row = target.closest('tr');
|
|
if (row) {
|
|
row.remove();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|