This example demonstrates the use of a dropdown control to trigger editing actions in the last column of the table, a common pattern that is used for editing interfaces. To demonstrate various functions of Editor, there are additional option beyond simply editing and deleting rows - you can also duplicate a row, and trigger an action to increase the salary via a direct API call. This could also readily be used for setting boolean flags such as "Approved" or "Archived", if suitable for your data set.
The dropdown used in this example is a custom one (so this example contains a lot more CSS than most of the demos!). If you are using a styling framework such
as Bootstrap or Bulma, you could use their Dropdown components. There are also a great many dropdown libraries available, or you could ever use a simple
select. Use whatever is appropriate for your use case, the key take away from this example is being able to trigger
editing actions via the Editor API.
| Name | Position | Office | Extn. | Start date | Salary | Actions |
|---|---|---|---|---|---|---|
| Name | Position | Office | Extn. | Start date | Salary | Actions |
The JavaScript shown below is used to initialise the table shown in this example:
var editor = new DataTable.Editor({
ajax: '../../controllers/staff.php',
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'
}
],
table: '#example'
});
var table = new DataTable('#example', {
ajax: '../../controllers/staff.php',
columns: [
{
data: null,
render: (data) => data.first_name + ' ' + data.last_name
},
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary', render: DataTable.render.number(null, null, 0, '$') },
{
data: null,
className: 'dt-center actions',
defaultContent: '<button class="dropdown">Action</button>',
orderable: false
}
],
layout: {
topStart: {
buttons: [
{
text: 'Create new record',
action: function () {
// Create new record
editor.create({
title: 'Create new record',
buttons: 'Add'
});
}
}
]
}
}
});
var actions = $('#actions');
// Show the action dropdown
table.on('click', 'button.dropdown', function (e) {
e.stopPropagation();
// Display and position the dropdown
actions.appendTo(this.parentNode).css({
display: 'block',
top: (this.offsetTop + this.offsetHeight + 5),
right: this.offsetLeft
});
// Remove with the next click on the document
$(document).one('click', function () {
actions.remove();
});
});
// Edit button
table.on('click', 'button[value="edit"]', function (e) {
editor.edit(e.target.closest('tr'), {
title: 'Edit record',
buttons: 'Update'
});
});
// Duplicate button
table.on('click', 'button[value="duplicate"]', function (e) {
editor
.edit(e.target.closest('tr'), {
title: 'Duplicate record',
buttons: 'Create from existing'
})
.mode('create');
});
// 5% button
table.on('click', 'button[value="salary"]', function (e) {
editor.edit(e.target.closest('tr'), false);
let current = editor.field( 'salary' ).val();
editor.field( 'salary' ).val(parseInt(current * 1.05))
editor.submit();
});
// Delete button
table.on('click', 'button[value="delete"]', function (e) {
editor.remove(e.target.closest('tr'), {
title: 'Delete record',
message: 'Are you sure you wish to remove this record?',
buttons: 'Delete'
});
});
const editor = new DataTable.Editor({
ajax: '../../controllers/staff.php',
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'
}
],
table: '#example'
});
const table = new DataTable('#example', {
ajax: '../../controllers/staff.php',
columns: [
{
data: null,
render: (data) => data.first_name + ' ' + data.last_name
},
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary', render: DataTable.render.number(null, null, 0, '$') },
{
data: null,
className: 'dt-center actions',
defaultContent: '<button class="dropdown">Action</button>',
orderable: false
}
],
layout: {
topStart: {
buttons: [
{
text: 'Create new record',
action: function () {
// Create new record
editor.create({
title: 'Create new record',
buttons: 'Add'
});
}
}
]
}
}
});
let actions = document.querySelector('#actions');
// Show the action dropdown
table.on('click', 'button.dropdown', function (e) {
e.stopPropagation();
// Display and position the dropdown
this.parentNode.append(actions);
actions.style.display = 'block';
actions.style.top = (this.offsetTop + this.offsetHeight + 5) + 'px';
actions.style.right = this.offsetLeft + 'px';
// Remove with the next click on the document
document.addEventListener('click', function () {
actions.remove();
});
});
// Edit button
table.on('click', 'button[value="edit"]', function (e) {
editor.edit(e.target.closest('tr'), {
title: 'Edit record',
buttons: 'Update'
});
});
// Duplicate button
table.on('click', 'button[value="duplicate"]', function (e) {
editor
.edit(e.target.closest('tr'), {
title: 'Duplicate record',
buttons: 'Create from existing'
})
.mode('create');
});
// 5% button
table.on('click', 'button[value="salary"]', function (e) {
editor.edit(e.target.closest('tr'), false);
let current = editor.field( 'salary' ).val();
editor.field( 'salary' ).val(parseInt(current * 1.05))
editor.submit();
});
// Delete button
table.on('click', 'button[value="delete"]', function (e) {
editor.remove(e.target.closest('tr'), {
title: 'Delete record',
message: 'Are you sure you wish to remove this record?',
buttons: 'Delete'
});
});
In addition to the above code, the following JavaScript library files are loaded for use in this example:
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:
td.actions {
position: relative;
}
button.dropdown {
background: rgb(255, 255, 255);
border: 1px solid #ccc;
border-radius: 3px;
padding: .25em 1em;
font-size: 12px;
}
button.dropdown:hover {
background: rgb(245, 245, 245);
cursor: pointer;
}
button.dropdown::after {
position: relative;
display: inline-block;
top: -1px;
margin-left: 0.25em;
content: '▼';
opacity: 0.5;
font-size: 0.7rem;
}
div.dropdown {
display: none;
position: absolute;
z-index: 2;
border: 1px solid #ccc;
background: rgb(255, 255, 255);
border-radius: 3px;
width: 200px;
padding: 0;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15);
}
div.dropdown button {
position: relative;
width: 100%;
padding: .75em 1em;
margin: 0;
border-radius: 0;
text-align: left;
background: white;
border: none;
border-bottom: 1px solid #ccc;
font-size: 12px;
}
div.dropdown button:hover {
background: rgb(245, 245, 245);
cursor: pointer;
}
div.dropdown button:last-child {
border-bottom: none;
}
div.dropdown button::after {
position: absolute;
right: 5px;
display: inline-block;
font-family: FontAwesome;
font-size: inherit;
text-rendering: auto;
margin-right: 0.5em;
opacity: 0.7;
}
div.dropdown button[value='edit']::after {
content: '\f040';
}
div.dropdown button[value='duplicate']::after {
content: '\f24d';
}
div.dropdown button[value='salary']::after {
content: '\f155';
}
div.dropdown button[value='delete']::after {
content: '\f1f8';
}
/* Dark mode colouring */
html.dark button.dropdown {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgb(89, 91, 94);
color: white;
}
html.dark button.dropdown:hover {
background: rgba(255, 255, 255, 0.25);
}
html.dark div.dropdown {
background: rgb(33, 37, 41);
border: 1px solid rgb(89, 91, 94);
}
html.dark div.dropdown button {
background: rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgb(89, 91, 94);
color: white;
}
html.dark div.dropdown button:hover {
background: rgba(255, 255, 255, 0.25);
}
The following CSS library files are loaded for use in this example to provide the styling of the table:
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.
The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.