safekat/httpdocs/assets/js/safekat/components/table.js

let Table = function (
    domItem,
    alias,
    url,
    columns,
    data,
    row_id = "DT_RowId",

    language = "es-ES") {

    this.domItem = domItem;
    this.alias = alias;
    this.url = url;
    this.columns = columns;
    this.data = data;
    this.row_id = row_id;
    this.language = language;

    this.table = null;
    this.actions = []; // Declaración inicial de actions como propiedad
    this.deleteModal = null;

    const self = this;

    this.init = function ({
        dom = '<"mt-4"><"float-end"B><"float-start"l><t><"mt-4 mb-3"p>',
        actions = ['view', 'edit', 'delete', 'cancel'],
        order = [[0, 'asc']],
        buttonsExport = true,
        colVisibility = true,
        buttonNewWithEditor = false,
        editor = null,
        booleanColumns = [],
    } = {}) {

        this.actions = actions;  

        const lastColNr = this.domItem.find("tr:first th").length - 1;

        let columnDefs = [];
        if (actions.length > 0) {
            columnDefs = [
                {
                    orderable: false,
                    searchable: false,
                    targets: [lastColNr]
                }
            ];
            columns.push(
                {
                    'data': self.actionBtns.bind(self), // Vincular correctamente el contexto
                    'defaultContent': '<span class="edit"><a href="javascript:void(0);"><i class="ti ti-pencil ti-sm btn-edit mx-2"></i></a></span><span class="cancel"></span><a href="javascript:void(0);"><i class="ti ti-trash ti-sm btn-delete mx-2"></i></a>',
                    'className': 'row-edit dt-center',
                }
            );
        }

        let buttons = [];
        if (buttonsExport) {
            buttons = [
                'copy', 'csv', 'excel', 'print', {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A4'
                }
            ];
        }
        if(colVisibility){
            buttons.unshift({
                extend: 'colvis',
                columns: ':not(.noVis)', 
                
            })
        }
        if (buttonNewWithEditor) {
            buttons.push(
                {
                    className: 'btn btn-primary me-sm-3 me-1',
                    extend: "createInline",
                    editor: editor,
                    formOptions: {
                        submitTrigger: -1,
                        submitHtml: '<a href="javascript:void(0);"><i class="ti ti-device-floppy"></i></a>'
                    }
                }
            );
        }

        // Inicialización de DataTable
        this.table = this.domItem.DataTable({
            processing: true,
            serverSide: true,
            autoWidth: true,
            responsive: true,
            scrollX: true,
            stateSave: false,
            lengthMenu: [5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500],
            order: order,
            orderCellsTop: true,
            fixedHeader: true,
            rowId: row_id,
            dom: dom,
            ajax: $.fn.dataTable.pipeline({
                url: this.url,
                method: 'POST',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                data: function (d) {
                    $.each(self.data, function (key, val) {
                        d[val.name] = val.value;
                    });
                },
                async: true,
            }),
            buttons: buttons,
            columns: this.columns,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/" + this.language + ".json"
            },
            columnDefs: columnDefs,
        });

        if (Array.isArray(booleanColumns) && booleanColumns.length > 0) {
            this.table.on('draw.dt', function () {
                for (let coln of booleanColumns) {
                    self.table.column(coln, { page: 'current' }).nodes().each(function (cell) {
                        cell.innerHTML = cell.innerHTML == '1' ? '<i class="ti ti-check"></i>' : '';
                    });
                }
            });
        }
    };

    this.getAlias = function () {
        return this.alias;
    }

    this.setData = function (data) {
        this.data = data;
    }

    this.setPageLength = function (length) {
        this.table.page.len(length).draw();
    }

    this.setEditCallback = function (callback) {
        this.domItem.on('click', '.btn-edit-' + this.alias, function () {
            let id = $(this).data('id');
            callback(id);
        });
    }

    this.setDeleteCallback = function (callback) {
        this.domItem.on('click', '.btn-delete-' + this.alias, function () {
            let id = $(this).data('id');
            callback(id);
        });
    }

    this.setViewCallback = function (callback) {
        this.domItem.on('click', '.btn-view-' + this.alias, function () {
            let id = $(this).data('id');
            callback(id);
        });
    }

    this.actionBtns = function (data) {
        let btns = ``;
        if (this.actions.includes('view')) {
            btns += `<span class="view"><a href="javascript:void(0);"><i class="ti ti-eye ti-sm btn-edit-${this.alias} mx-2" data-id="${data.id}"></i></a></span>`;
        }
        if (this.actions.includes('edit')) {
            btns += `<span class="edit"><a href="javascript:void(0);"><i class="ti ti-pencil ti-sm btn-edit-${this.alias} mx-2" data-id="${data.id}"></i></a></span>`;
        }
        if (this.actions.includes('cancel')) {
            btns += `<span class="cancel"></span>`;
        }
        if (this.actions.includes('delete')) {
            btns += `<a href="javascript:void(0);"><i class="ti ti-trash ti-sm btn-delete-${this.alias} mx-2" data-id="${data.id}"></i></a>`;
        }

        return btns;
    };
    

}

export default Table;