This example shows Editor being used with the upload fields type to give end users the ability to upload a file in the form. The upload field type allows just a single file to be
uploaded, while its companion input type uploadMany provides the ability to have multiple files uploaded for a single field.
The upload options of Editor are extensively documented in the manual (Javascript, PHP, .NET and NodeJS) and details the various options available.
In this example an image file can be uploaded, limited to 500KB using server-side validation. To display the image a simple img tag is used, with information about the file to be displayed retrieved using the file() method which Editor makes available and is
automatically populated based on the server-side configuration.
| First name | Last name | Phone # | City | Image |
|---|---|---|---|---|
| First name | Last name | Phone # | City | Image |
The Javascript shown below is used to initialise the table shown in this example:
var editor = new DataTable.Editor({
ajax: '../../controllers/upload.php',
fields: [
{
label: 'First name:',
name: 'first_name'
},
{
label: 'Last name:',
name: 'last_name'
},
{
label: 'Phone #:',
name: 'phone'
},
{
label: 'City:',
name: 'city'
},
{
label: 'Image:',
name: 'image',
type: 'upload',
display: function (file_id) {
return '<img src="' + editor.file('files', file_id).web_path + '"/>';
},
clearText: 'Clear',
noImageText: 'No image'
}
],
table: '#example'
});
var table = $('#example').DataTable({
ajax: '../../controllers/upload.php',
columns: [
{ data: 'first_name' },
{ data: 'last_name' },
{ data: 'phone' },
{ data: 'city' },
{
data: 'image',
render: function (file_id) {
return file_id
? '<img src="' + editor.file('files', file_id).web_path + '"/>'
: null;
},
defaultContent: 'No image',
title: 'Image'
}
],
layout: {
topStart: {
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
]
}
},
select: true
});
const editor = new DataTable.Editor({
ajax: '../../controllers/upload.php',
fields: [
{
label: 'First name:',
name: 'first_name'
},
{
label: 'Last name:',
name: 'last_name'
},
{
label: 'Phone #:',
name: 'phone'
},
{
label: 'City:',
name: 'city'
},
{
label: 'Image:',
name: 'image',
type: 'upload',
display: (fileId) =>
`<img src="${editor.file('files', fileId).web_path}"/>`,
clearText: 'Clear',
noImageText: 'No image'
}
],
table: '#example'
});
const table = new DataTable('#example', {
ajax: '../../controllers/upload.php',
columns: [
{ data: 'first_name' },
{ data: 'last_name' },
{ data: 'phone' },
{ data: 'city' },
{
data: 'image',
render: function (file_id) {
return file_id
? `<img src="${editor.file('files', file_id).web_path}"/>`
: null;
},
defaultContent: 'No image',
title: 'Image'
}
],
layout: {
topStart: {
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
]
}
},
select: true
});
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:
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.