DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the
foundations of progressive enhancement,
that adds all of these advanced features to any HTML table.
Read the official
DataTables for a full list of instructions
and other options.
Here you can find basic dataTable with filter, pagination, Length Changing, information, etc.. We have added a button to Add new record in the table. You can find details in the example below :
You need to install buttons and other export extensions to use the buttons as we have displayed in this table.
id | Name | Date | Salary | Status | Action |
---|
<div class="card-datatable table-responsive pt-0">
<table class="datatables-basic table border-top">
<thead>
<tr>
<th></th>
<th></th>
<th>id</th>
<th>Name</th>
<th>Email</th>
<th>Date</th>
<th>Salary</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
$(function() {
'use strict';
var dt_basic_table = $('.datatables-basic');
// DataTable with buttons
// --------------------------------------------------------------------
if (dt_basic_table.length) {
var dt_basic = dt_basic_table.DataTable({
ajax: assetsPath + '/json/table-datatable.json',
columns: [
{ data: '' },
{ data: 'id' },
{ data: 'id' },
{ data: 'full_name' },
{ data: 'email' },
{ data: 'start_date' },
{ data: 'salary' },
{ data: 'status' },
{ data: '' }
],
columnDefs: [
{
// For Responsive
className: 'control',
orderable: false,
responsivePriority: 2,
searchable: false,
targets: 0,
render: function(data, type, full, meta) {
return '';
}
},
{
// For Checkboxes
targets: 1,
orderable: false,
responsivePriority: 3,
searchable: false,
checkboxes: true,
render: function() {
return '<input type="checkbox" class="dt-checkboxes form-check-input">';
},
checkboxes: {
selectAllRender: '<input type="checkbox" class="form-check-input">'
}
},
{
targets: 2,
searchable: false,
visible: false
},
{
// Avatar image/badge, Name and post
targets: 3,
responsivePriority: 4,
render: function(data, type, full, meta) {
var $user_img = full['avatar'],
$name = full['full_name'],
$post = full['post'];
if ($user_img) {
// For Avatar image
var $output =
'<img src="' + assetsPath + '/img/avatars/' + $user_img + '" alt="Avatar" class="rounded-circle">';
} else {
// For Avatar badge
var stateNum = Math.floor(Math.random() * 6);
var states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary'];
var $state = states[stateNum],
$name = full['full_name'],
$initials = $name.match(/\b\w/g) || [];
$initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
$output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
}
// Creates full output for row
var $row_output =
'<div class="d-flex justify-content-start align-items-center">' +
'<div class="avatar-wrapper">' +
'<div class="avatar me-2">' +
$output +
'</div>' +
'</div>' +
'<div class="d-flex flex-column">' +
'<span class="emp_name text-truncate">' +
$name +
'</span>' +
'<small class="emp_post text-truncate text-muted">' +
$post +
'</small>' +
'</div>' +
'</div>';
return $row_output;
}
},
{
responsivePriority: 1,
targets: 4
},
{
// Label
targets: -2,
render: function(data, type, full, meta) {
var $status_number = full['status'];
var $status = {
1: { title: 'Current', class: 'bg-label-primary' },
2: { title: 'Professional', class: ' bg-label-success' },
3: { title: 'Rejected', class: ' bg-label-danger' },
4: { title: 'Resigned', class: ' bg-label-warning' },
5: { title: 'Applied', class: ' bg-label-info' }
};
if (typeof $status[$status_number] === 'undefined') {
return data;
}
return (
'<span class="badge rounded-pill ' +
$status[$status_number].class +
'">' +
$status[$status_number].title +
'</span>'
);
}
},
{
// Actions
targets: -1,
title: 'Actions',
orderable: false,
searchable: false,
render: function(data, type, full, meta) {
return (
'<div class="d-inline-block">' +
'<a href="javascript:;" class="btn btn-sm text-primary btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></a>' +
'<ul class="dropdown-menu dropdown-menu-end">' +
'<li><a href="javascript:;" class="dropdown-item">Details</a></li>' +
'<li><a href="javascript:;" class="dropdown-item">Archive</a></li>' +
'<div class="dropdown-divider"></div>' +
'<li><a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a></li>' +
'</ul>' +
'</div>' +
'<a href="javascript:;" class="btn btn-sm text-primary btn-icon item-edit"><i class="bx bxs-edit"></i></a>'
);
}
}
],
order: [[2, 'desc']],
dom:
'<"card-header"<"head-label text-center"><"dt-action-buttons text-end"B>><"d-flex justify-content-between align-items-center row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
displayLength: 7,
lengthMenu: [7, 10, 25, 50, 75, 100],
buttons: [
{
extend: 'collection',
className: 'btn btn-label-primary dropdown-toggle me-2',
text: '<i class="bx bx-show me-1"></i>Export',
buttons: [
{
extend: 'print',
text: '<i class="bx bx-printer me-1" ></i>Print',
className: 'dropdown-item',
exportOptions: { columns: [3, 4, 5, 6, 7] }
},
{
extend: 'csv',
text: '<i class="bx bx-file me-1" ></i>Csv',
className: 'dropdown-item',
exportOptions: { columns: [3, 4, 5, 6, 7] }
},
{
extend: 'excel',
text: 'Excel',
className: 'dropdown-item',
exportOptions: { columns: [3, 4, 5, 6, 7] }
},
{
extend: 'pdf',
text: '<i class="bx bxs-file-pdf me-1"></i>Pdf',
className: 'dropdown-item',
exportOptions: { columns: [3, 4, 5, 6, 7] }
},
{
extend: 'copy',
text: '<i class="bx bx-copy me-1" ></i>Copy',
className: 'dropdown-item',
exportOptions: { columns: [3, 4, 5, 6, 7] }
}
]
},
{
text: '<i class="bx bx-plus me-1"></i> <span class="d-none d-lg-inline-block">Add New Record</span>',
className: 'create-new btn btn-primary'
}
],
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function(row) {
var data = row.data();
return 'Details of ' + data['full_name'];
}
}),
type: 'column',
renderer: function(api, rowIdx, columns) {
var data = $.map(columns, function(col, i) {
return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
? '<tr data-dt-row="' +
col.rowIndex +
'" data-dt-column="' +
col.columnIndex +
'">' +
'<td>' +
col.title +
':' +
'</td> ' +
'<td>' +
col.data +
'</td>' +
'</tr>'
: '';
}).join('');
return data ? $('<table class="table"/><tbody />').append(data) : false;
}
}
}
});
$('div.head-label').html('<h5 class="card-title mb-0">DataTable with Buttons</h5>');
}
});
Title | Link | Description |
---|---|---|
NPM Packages | https://datatables.net/download/npm | DataTables and its extensions are available as NPM packages. |
DataTables Extensions | https://datatables.net/extensions/index | The features that DataTables provides can be greatly enhanced by the use of the plug-ins available on this page, which give many new user interaction and configuration options. |
DataTables DOM | https://datatables.net/reference/option/dom | Define the table control elements to appear on the page and in what order. |
DataTables Plugins | https://datatables.net/plug-ins/index | DataTables provide plug-ins of various types, which has a lot of flexibility built-in by default. |
DataTables Manual | https://datatables.net/manual/index | DataTable manual is made to guide developer or end users to make it easy and more powerful. |
DataTables Examples | https://datatables.net/examples/index | DataTable examples will show you how to perform tasks ranging from something as simple as applying DataTables to an HTML table, right the way through to doing server-side processing with pipelining and custom plug-in functions. |
As you have already used, npm install
or yarn install
command when you have
started this package,
that will include dataTables package with few extensions that we are using in this template. If you have not
executed any of these commands, then you can do it now :)
If your table contains a limited number of records and you're facing a vertical scrollbar issue upon dropdown opening, consider removing the table-responsive
class with card-datatables
class instead to present the dropdown without a scrollbar.
Please keep in mind that this solution might not be compatible with the responsive modal script of datatables.