Add Datatables.net to asset mapper

master
Julien Rosset 1 year ago
parent 9e8133a136
commit 93ae08e8aa

@ -0,0 +1,135 @@
//region Datatables.net
import 'datatables.net';
import 'datatables.net-dt/css/dataTables.dataTables.min.css';
//endregion
//region Bootstrap 5 styling for Datatables.net
import 'datatables.net-bs5';
import 'datatables.net-bs5/css/dataTables.bootstrap5.min.css';
//endregion
//region Custom style for Datatables.net
import './styles/datatables.scss';
//endregion
import Utils from 'utils';
$('table.table-datatable').each(function () {
const self = $(this);
//region Options du datatable
let options = {
paging: Utils.getData(self, 'sortPaging', false),
pageLength: Utils.getData(self, 'sortPerPage', 50),
processing: true,
layout: Utils.getData(
self,
'sortLayout',
{
topStart: null,
topEnd: null,
bottomStart: null,
bottomEnd: 'paging',
},
),
};
//endregion
//region Gestion tri initial
let initialSort = [];
$('> thead > tr > th[data-sort-onLoad]', this).each(function () {
let self = $(this);
initialSort.push(
{
index: self.index(),
priority: self.data('sortOnload'),
direction: Utils.getData(self, 'sortOrder', 'asc').toLowerCase(),
},
);
});
initialSort.sort(function (sort1, sort2) {
if (sort1.priority === sort2.priority) {
return sort1.index - sort2.index;
}
return sort1.priority - sort2.priority;
});
if (initialSort.length > 0) {
options.order = [];
initialSort.forEach(function (sortOrder) {
options.order.push([sortOrder.index, sortOrder.direction]);
});
}
//endregion
//region Gestion sens de tri (1er clic ou initial si concerné)
let descSort = [];
$('> thead > tr > th[data-sort-order]', this).each(function () {
const self = $(this);
if (Utils.getData(self, 'sortOrder', 'asc').toLowerCase() === 'desc') {
descSort.push(self.index());
}
});
if (descSort.length > 0) {
if (!options.hasOwnProperty('columnDefs')) {
options.columnDefs = [];
}
options.columnDefs.push(
{
targets: descSort,
orderSequence: ['desc', 'asc'],
},
);
}
//endregion
//region Gestion désactivation tri
let disabledSort = [];
$('> thead > tr > th[data-sort]', this).each(function () {
const self = $(this);
if (!Utils.getData(self, 'sort', true)) {
disabledSort.push(self.index());
}
});
if (disabledSort.length > 0) {
if (!options.hasOwnProperty('columnDefs')) {
options.columnDefs = [];
}
options.columnDefs.push(
{
targets: disabledSort,
orderable: false,
},
);
}
//endregion
//region Gestion nom des colonnes
const columnsName = $('> thead > tr > th[data-sort-name]', this);
if (columnsName.length > 0) {
if (!options.hasOwnProperty('columnDefs')) {
options.columnDefs = [];
}
columnsName.each(function () {
const self = $(this);
const name = Utils.getData(self, 'sortName', '');
if (name !== '') {
options.columnDefs.push(
{
targets: self.index(),
name: name,
},
);
}
});
}
//endregion
//region Gestion de AJAX
const ajaxUrl = Utils.getData(self, 'sortAjax', false);
if (ajaxUrl !== false) {
options.serverSide = true;
options.ajax = {
url: ajaxUrl,
type: 'POST',
cache: Utils.getData(self, 'sortAjaxCache', false),
};
}
//endregion
self.DataTable(options);
});

@ -2,3 +2,7 @@
@import 'xdebug';
@import 'layout';
@import 'freakFlagSprite';
.required:not(.form-check-label) {
color : var(--bs-red);
}

@ -0,0 +1,35 @@
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::after,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::after,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::after,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::before,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after {
margin-top : 3px;
}
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {
position : relative;
left : 10px;
top : none;
bottom : none;
}
div.dt-container .dt-paging .dt-paging-button {
padding : 0;
margin : 0;
}

@ -12,20 +12,41 @@
* The "importmap:require" command can be used to add new entries to this file.
*/
return [
'app' => [
'app' => [
'path' => './assets/app.js',
'entrypoint' => true,
],
'datatables' => [
'path' => './assets/datatables.js',
'entrypoint' => true,
],
'bootstrap' => [
'version' => '5.3.3',
],
'@popperjs/core' => [
'version' => '2.11.8',
],
'jquery' => [
'jquery' => [
'version' => '3.7.1',
],
'utils' => [
'utils' => [
'path' => './assets/utils.js',
],
'@fortawesome/free-solid-svg-icons' => [
'version' => '6.5.2',
],
'datatables.net' => [
'version' => '2.0.7',
],
'datatables.net-dt/css/dataTables.dataTables.min.css' => [
'version' => '2.0.7',
'type' => 'css',
],
'datatables.net-bs5' => [
'version' => '2.0.7',
],
'datatables.net-bs5/css/dataTables.bootstrap5.min.css' => [
'version' => '2.0.7',
'type' => 'css',
],
];

Loading…
Cancel
Save