Add Datatables.net to asset mapper
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);
|
||||||
|
});
|
||||||
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue