Testeando la funcionalidad. Datatables no funciona

2025-07-25 22:52:08 +00:00 · 2023-08-21 20:16:51 +02:00
parent 71044d1e14
commit 4b1cb72ec0
4 changed files with 193 additions and 6 deletions
--- a/ci4/app/Views/themes/backend/vuexy/form/configuracion/papel/viewPapelImpresionForm.php
+++ b/ci4/app/Views/themes/backend/vuexy/form/configuracion/papel/viewPapelImpresionForm.php
@ -186,7 +186,189 @@
 <?= $this->endSection() ?>


+
+
 <?php if(str_contains($formAction,'edit')): ?>
+
+
+<!------------------------------------------->
+<!-- Código JS para tabla margenes -->
+<!------------------------------------------->
+<?= $this->section("additionalInlineJs") ?>
+
+    var theTable3;
+    const lastColNr3 = $('#tableOfPapelimpresionmargenes').find("tr:first th").length - 1;
+    const actionBtns3 = function(data) {
+        return `
+                    <span class="edit"><a href="javascript:void(0);"><i class="ti ti-pencil ti-sm btn-edit2 mx-2" data-id="${data.id}"></i></a></span>
+                    <a href="javascript:void(0);"><i class="ti ti-trash ti-sm btn-delete mx-2" data-id="${data.id}" data-bs-toggle="modal" data-bs-target="#confirm2delete"></i></a>
+                    <span class="cancel"></span>
+                `;
+    };
+
+    
+    // Definición del editor
+    var editor3 = new $.fn.dataTable.Editor( {
+        ajax: {
+            url: "<?= route_to('editorOfPapelImpresionMargenes') ?>", 
+            headers: {
+                <?= csrf_token() ?? "token" ?> : <?= csrf_token() ?>v,
+            },
+        },
+        table   : "#tableOfPapelimpresionmargenes",
+        idSrc:  'id',
+        fields: [ 
+            {
+                name: "paginas_min",
+                attr: {
+                    type: "number"
+                }
+            },{
+                name: "paginas_max",
+                attr: {
+                    type: "number"
+                }
+            },{
+                name: "margen",
+                attr: {
+                    type: "number"
+                }
+            }, {
+                "name": "papel_impresion_id",
+                "type": "hidden"
+            }, {
+                "name": "deleted_at",
+                "type": "hidden"
+            }, {
+                "name": "is_deleted",
+                "type": "hidden"
+            },
+        ]
+    } );
+
+
+
+    // Definición de la tabla
+    theTable3 = $('#tableOfPapelimpresionmargenes').DataTable({
+        processing: true,
+        serverSide: true,
+        autoWidth: true,
+        responsive: true,
+        scrollX: true,
+        lengthMenu: [ 5],
+        pageLength: 5,
+        lengthChange: false,
+        searching: false,
+        info: false,
+        "dom": '<"mt-4"><"float-end"B><"float-start"l><t><"mt-4 mb-3"p>',
+        stateSave: true,
+        language: {
+            url: "//cdn.datatables.net/plug-ins/1.13.4/i18n/<?= config('Basics')->i18n ?>.json"
+        },
+        ajax : $.fn.dataTable.pipeline( {
+            url: '<?= route_to('dataTableOfPapelImpresionMargen') ?>',
+            data: {
+                id_PI: id,
+            },
+            method: 'POST',
+            headers: {'X-Requested-With': 'XMLHttpRequest'},
+            async: true,
+        }),
+        columns : [
+            { 'data': 'paginas_min' },
+            { 'data': 'paginas_max' },
+            { 'data': 'margen' },
+            { data: actionBtns3,
+                className: 'row-edit dt-center'}
+        ],
+        columnDefs: [
+            {
+                orderable: false,
+                searchable: false,
+                targets: [lastColNr3] 
+            }
+        ],
+        buttons: [ {
+            className: 'btn btn-primary float-end me-sm-3 me-1',
+            extend: "createInline",
+            editor: editor3,
+            formOptions: {
+                submitTrigger: -1,
+                submitHtml: '<a href="javascript:void(0);"><i class="ti ti-device-floppy"></i></a>'
+            }
+        } ]
+    });
+
+
+    // Activate an inline edit on click of a table cell
+    $(document).on('click', '.btn-edit2', function(e) {
+        editor.inline(
+            theTable3.cells(this.parentNode.parentNode.parentNode, '*').nodes(),
+            {
+                cancelHtml: '<a href="javascript:void(0);"><i class="ti ti-x"></i></a>',
+                cancelTrigger: 'span.cancel',
+                submitHtml: '<a href="javascript:void(0);"><i class="ti ti-device-floppy"></i></a>',
+                submitTrigger: 'span.edit',
+                submit: 'allIfChanged'
+            } 
+        );
+    } );
+
+
+    // Obtención del id para editar
+    editor3.on( 'preSubmit', function ( e, d, type ) {
+        if ( type === 'create'){
+            d.data[0]['papel_impresion_id'] = id;
+        }
+        else if(type === 'edit' ) {
+            for (v in d.data){
+                d.data[v]['papel_impresion_id'] = id;
+            }
+        }
+    });
+
+    // Refrescar token
+    editor3.on( 'postSubmit', function ( e, json, data, action ) {
+    
+        yeniden(json.<?= csrf_token() ?>);
+    });
+
+    // Refrescar tabla
+    editor3.on( 'submitSuccess', function ( e, json, data, action ) {
+        
+        theTable3.clearPipeline();
+        theTable3.draw();
+    });
+
+
+    /*
+
+    // Borrar registro
+    $(document).on('click', '.btn-delete', function(e) {
+        $(".btn-remove").attr('data-id', $(this).attr('data-id'));
+    });
+
+    $(document).on('click', '.btn-remove', function(e) {
+        const dataId = $(this).attr('data-id');
+        const row = $(this).closest('tr');
+        if ($.isNumeric(dataId)) {
+            $.ajax({
+                url: `/configuracion/papelimpresiontipologias/delete/${dataId}`,
+                method: 'GET',
+            }).done((data, textStatus, jqXHR) => {
+                $('#confirm2delete').modal('toggle');
+                theTable.clearPipeline();
+                theTable.row($(row)).invalidate().draw();
+                popSuccessAlert(data.msg ?? jqXHR.statusText);
+            }).fail((jqXHR, textStatus, errorThrown) => {
+                popErrorAlert(jqXHR.responseJSON.messages.error)
+            })
+        }
+    });
+    */
+
+<?= $this->endSection() ?>
+
 <!------------------------------------------->
 <!-- Código JS para tabla tipologias -->
 <!------------------------------------------->