RecipeManager/assets/datatables.js

//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 'jqueryLocal';

$(function () {
    $('table.table-datatable').each(function () {
        const self = $(this);

        //region Options du datatable
        let options = {
            paging:     self.data('sortPaging', false),
            pageLength: self.data('sortPerPage', 50),
            processing: true,
            layout:     self.data(
                '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: self.data('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 (self.data('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 (!self.data('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 = self.data('sortName', '');
                if (name !== '') {
                    options.columnDefs.push(
                        {
                            targets: self.index(),
                            name:    name,
                        },
                    );
                }
            });
        }
        //endregion
        //region Gestion de AJAX
        const ajaxUrl = self.data('sortAjax', false);
        if (ajaxUrl !== false) {
            options.serverSide = true;
            options.ajax = {
                url:  ajaxUrl,
                type: 'POST',
                //createCDATASection: '',
                cache: self.data('sortAjaxCache', false),
            };

            options.columns = [];
            columnsName.each(function () {
                const self = $(this);
                const name = self.data('sortName', '');
                if (name !== '') {
                    options.columns[self.index()] = {
                        data: name,
                    };
                }
            });
        }
        //endregion

        self.DataTable(options);
    });
});