Add Datatables.net to asset mapper
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