papel impresion terminado a falta de añadir maquinas y revisar UI

ci4/app/Views/themes/backend/vuexy/form/configuracion/papel/viewPapelImpresionForm.php

@@ -1,3 +1,4 @@
+<?= $this->include('themes/_commonPartialsBs/datatables') ?>
 <?= $this->include("themes/_commonPartialsBs/select2bs5") ?>
 <?= $this->include("themes/_commonPartialsBs/sweetalert") ?>
 <?= $this->extend('themes/backend/vuexy/main/defaultlayout') ?>
@@ -16,23 +17,468 @@
 				<?= view("themes/backend/vuexy/form/configuracion/papel/_papelImpresionFormItems") ?>
 			</div><!-- /.card-body -->
 			<div class="card-footer">
-				<?= anchor(route_to("papelImpresionList"), lang("Basic.global.Cancel"), ["class" => "btn btn-secondary float-start"]) ?>
-				<input type="submit" class="btn btn-primary float-end" name="save" value="<?= lang("Basic.global.Save") ?>">
+                <input type="submit"
+                           class="btn btn-primary float-start me-sm-3 me-1"
+                           name="save"
+                           value="<?= lang("Basic.global.Save") ?>"
+                    />
+                    <?= anchor(route_to("papelImpresionList"), lang("Basic.global.Cancel"), ["class" => "btn btn-secondary"]) ?>
+				
 			</div><!-- /.card-footer -->
 			</form>
     </div><!-- //.card -->
+
+    <?php if(str_contains($formAction,'edit')): ?>
+        <?php if($papelImpresion->rotativa == true): ?>
+            <div class="accordion mt-3" id="accordionTipologias">
+        <?php else: ?>
+            <div class="accordion mt-3" id="accordionTipologias" style="display:none">
+        <?php endif; ?>
+            <div class="card accordion-item active">
+                <h2 class="accordion-header" id="headingOne">
+                    <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionTip1" aria-expanded="false" aria-controls="accordionTip1">
+                        <p><?= lang("PapelImpresion.consumo_tintas_rotativas") ?></p>
+                    </button>
+                    <p class="btn btn-primary float-end me-sm-3 me-1" id="newTipologia"> <?= lang('Basic.global.addNew') ?> </p>
+                </h2>
+
+                <div id="accordionTip1" class="accordion-collapse collapse show" data-bs-parent="#accordionTipologias">
+                    <div class="accordion-body">
+                        
+                        <table id="tableOfPapelimpresiontipologias" class="table table-striped table-hover" style="width: 100%;">
+                            <thead>
+                                <tr>
+                                    <th><?= lang('ImpresionTipologias.tipo') ?></th>
+                                    <th><?= lang('ImpresionTipologias.negro') ?></th>
+                                    <th><?= lang('ImpresionTipologias.cyan') ?></th>
+                                    <th><?= lang('ImpresionTipologias.magenta') ?></th>
+                                    <th><?= lang('ImpresionTipologias.amarillo') ?></th>
+                                    <th><?= lang('ImpresionTipologias.gotaNegro') ?></th>
+                                    <th><?= lang('ImpresionTipologias.gotaColor') ?></th>
+                                    <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                            
+                            </tbody>
+                        </table>   
+                    </div>
+                </div>
+            </div>
+        </div> <!-- //.accordion -->
+    <?php endif; ?>
+
+
+
+    <div class="accordion mt-3" id="accordionMaquinas">
+        <div class="card accordion-item">
+            <h2 class="accordion-header" id="headingTwo">
+            <button
+                type="button"
+                class="accordion-button collapsed"
+                data-bs-toggle="collapse"
+                data-bs-target="#accordionMaq"
+                aria-expanded="false"
+                aria-controls="accordionMaq"
+            >
+                MAAAAQUIIIINAAAAAS<!---  lang("PapelImpresion.consumo_tintas_rotativas") ?>  AÑADIR LANGUAJE MAQUINAS-->
+            </button>
+            </h2>
+            <div
+            id="accordionMaq"
+            class="accordion-collapse collapse"
+            aria-labelledby="headingTwo"
+            data-bs-parent="#accordionMaquinas"
+            >
+            <div class="accordion-body">
+                <table id="tableOfMaquinas" class="table table-striped table-hover" style="width: 100%;">
+                    <thead>
+                        <tr>
+                            <th><?= lang('ImpresionTipologias.tipo') ?></th>
+                            <th><?= lang('ImpresionTipologias.negro') ?></th>
+                            <th><?= lang('ImpresionTipologias.cyan') ?></th>
+                            <th><?= lang('ImpresionTipologias.magenta') ?></th>
+                            <th><?= lang('ImpresionTipologias.amarillo') ?></th>
+                            <th><?= lang('ImpresionTipologias.gotaNegro') ?></th>
+                            <th><?= lang('ImpresionTipologias.gotaColor') ?></th>
+                            <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    
+                    </tbody>
+                </table>   
+            </div>
+        </div>
+    </div>
+
+
     </div><!--//.col -->
 </div><!--//.row -->
+
+
+
+<div id="tipologiaModal" class="modal fade">
+    <div class="modal-dialog">
+        <form method="post" id="tipologia_form">
+            <div class="modal-content">
+                <?= csrf_field() ?> 
+                <div class="modal-header">
+                    <h4 class="modal-title"><?= lang('Basic.edit') ?></h4>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="tipo" class="form-label">
+                            <?=lang('ImpresionTipologias.tipo') ?>
+                        </label>
+
+                        <select id="tipologiaTipo" name="tipologia_tipo" required class="form-control select2bs2" style="width: 100%;" >
+                            <option value=negro><?=lang('ImpresionTipologias.negro') ?></option>
+                            <option value=color><?=lang('ImpresionTipologias.color') ?></option>
+                            <option value=bicolor><?=lang('ImpresionTipologias.bicolor') ?></option>
+                        </select><!--//.form-check -->
+                    </div>
+            
+                    <div class="form-group">
+                        <label for="negro" class="form-label">
+                            <?=lang('ImpresionTipologias.negro') ?>
+                        </label>
+                        <input type="number" id="negro" name="negro" required placeholder="0.00" maxLength="8" step="0.01" class="form-control" value="0.00">
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="cyan" class="form-label">
+                            <?=lang('ImpresionTipologias.cyan') ?>
+                        </label>
+                        <input type="number" id="cyan" name="cyan" required placeholder="0.00" maxLength="8" step="0.01" class="form-control" value="0.00">
+                    </div>
+
+                    <div class="form-group">
+                    <label for="magenta" class="form-label">
+                            <?=lang('ImpresionTipologias.magenta') ?>
+                        </label>
+                        <input type="number" id="magenta" name="magenta" required placeholder="0.00" maxLength="8" step="0.01" class="form-control" value="0.00">
+                    </div>
+
+                    <div class="form-group">
+                    <label for="amarillo" class="form-label">
+                            <?=lang('ImpresionTipologias.amarillo') ?>
+                        </label>
+                        <input type="number" id="amarillo" name="amarillo" required placeholder="0.00" maxLength="8" step="0.01" class="form-control" value="0.00">
+                    </div>
+
+                    <div class="form-group">
+                    <label for="gotaNegro" class="form-label">
+                            <?=lang('ImpresionTipologias.gotaNegro') ?>
+                        </label>
+                        <input type="number" id="gotaNegro" name="gota_negro" required placeholder="0.00" maxLength="8" step="0.01" class="form-control" value="0.00">
+                    </div>
+
+                    <div class="form-group">
+                        <label for="gotaColor" class="form-label">
+                            <?=lang('ImpresionTipologias.gotaColor') ?>
+                        </label>
+                        <input type="number" id="gotaColor" name="gota_color" required placeholder="0.00" maxLength="8" step="0.01" class="form-control" value="0.00">
+                    </div>
+
+                </div>
+                <div class="modal-footer">
+                    <input type="hidden" name="hidden_id" id="hidden_id" />
+                    <input type="hidden" name="action" id="action" value="add" />
+                    <input type="submit" name="submit" id="submit_button" class="btn btn-primary float-start me-sm-3 me-1" value="Add" />
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> <?= lang("Basic.global.Cancel") ?> </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
 <?= $this->endSection() ?>
 
 
 <?= $this->section("additionalInlineJs") ?>
 
+    var theTable;
 
+    const url = window.location.href;
+    const url_parts = url.split('/');
+    if(url_parts[url_parts.length-2] == 'edit'){
+        id = url_parts[url_parts.length-1];
+    }
+    else{
+        id = -1;
+    }
+
+    const lastColNr = $('#tableOfPapelimpresiontipologias').find("tr:first th").length - 1;
+    const actionBtns = function(data) {
+        return `<div class="action-buttons">
+                    <i class="ti ti-pencil ti-sm btn-edit mx-2" data-id="${data.id}"></i>
+                    <i class="ti ti-trash ti-sm btn-delete mx-2" data-id="${data.id}"></i>
+                </div>`;
+    };
+    
+    theTable = $('#tableOfPapelimpresiontipologias').DataTable({
+        processing: true,
+        serverSide: true,
+        autoWidth: true,
+        responsive: true,
+        scrollX: true,
+        lengthMenu: [ 5],
+        pageLength: 5,
+        lengthChange: false,
+        searching: false, 
+        //paging: false, 
+        info: false,
+        "dom": 'lrt', 
+        stateSave: true,
+        language: {
+            url: "//cdn.datatables.net/plug-ins/1.13.4/i18n/<?= config('Basics')->i18n ?>.json"
+        },
+        ajax : $.fn.dataTable.pipeline( {
+            url: '<?= route_to('dataTableOfPapelesImpresion') ?>',
+            data: {
+                id_PI: id,
+            },
+            method: 'POST',
+            headers: {'X-Requested-With': 'XMLHttpRequest'},
+            async: true,
+        }),
+        columns : [
+            { 'data': 'tipo' },
+            { 'data': 'negro' },
+            { 'data': 'cyan' },
+            { 'data': 'magenta' },
+            { 'data': 'amarillo' },
+            { 'data': 'gota_negro' },
+            { 'data': 'gota_color' },
+            { data: actionBtns}
+        ]
+    });
+
+
+
+    // Add new tipología
+    $('#newTipologia').on("click", function(e) {
+        if ($('#tableOfPapelimpresiontipologias').DataTable().data().count() >= 3){
+            Swal.fire({
+                title: '<?= lang('Basic.global.sweet.maxRowsReached') ?>',
+                icon: 'info',
+                confirmButtonColor: '#3085d6',
+                confirmButtonText: '<?= lang('Basic.global.Close') ?>',
+                
+            });       
+        }
+        else{
+            $('#tipologiaTipo').attr('disabled', false);
+            $('#tipologiaTipo').val("");
+            $('#negro').val("0.00");
+            $('#cyan').val("0.00");
+            $('#magenta').val("0.00");
+            $('#amarillo').val("0.00");
+            $('#gotaNegro').val("0.00");
+            $('#gotaColor').val("0.00");
+
+            $('#action').val('add');
+            $('.modal-title').text('<?= lang('Basic.global.add') ?>' + ' ' + '<?= lang("PapelImpresion.consumo_tintas_rotativas") ?>');
+            $('#submit_button').val('<?= lang('Basic.global.Save') ?>');
+
+
+            $('#tipologiaModal').modal('show');
+
+            $('#hidden_id').val("");
+        }
+
+    });
+
+    $('#rotativa').on("click",function(el){
+        if(!$(this).is(':checked')){
+            Swal.fire({
+                title: '<?= lang('Basic.global.sweet.sureToDeleteTitle', [mb_strtolower(lang('PapelImpresion.papel impresion'))]) ?>',
+                text: '<?= lang('Basic.global.sweet.sureToDeleteText') ?>',
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                confirmButtonText: '<?= lang('Basic.global.sweet.deleteConfirmationButton') ?>',
+                cancelButtonText: '<?= lang('Basic.global.Cancel') ?>',
+                cancelButtonColor: '#d33'
+            })
+            .then((result) => {
+                if (result.value) {
+                    if($(this).is(':checked')){
+                        $("#accordionTipologias").show();
+                    }else{
+                        $("#accordionTipologias").hide();
+                    }
+                }
+                else{ 
+                    $(this).prop('checked', true) ;
+                
+                }
+            });
+        }
+        else{
+            $("#accordionTipologias").show();
+        }
+    });
+
+    $('#tipologiaModal').on('submit', function(event){
+        
+        event.preventDefault();
+        
+        const tipo_values = $('#tableOfPapelimpresiontipologias').DataTable().column().data().toArray();
+        
+        if(tipo_values.includes($('#tipologiaTipo').val()) && $('#action').val() == 'add'){
+            $('#tipologiaModal').modal('hide');
+            Swal.fire({
+                title: '<?= lang('Basic.global.Error') ?>',
+                text: '<?= lang('ImpresionTipologias.errorTipo') ?>',
+                icon: 'error',
+                showCancelButton: false,
+                confirmButtonColor: '#3085d6',
+                confirmButtonText: '<?= lang('Basic.global.ok') ?>',
+            })
+        }
+        else
+        {
+            var formData = {
+                <?= csrf_token() ?? "token" ?> : <?= csrf_token() ?>v,
+                papel_impresion_id: id,
+                tipo: $('#tipologiaTipo').val(),
+                negro: $('#negro').val(),
+                cyan: $('#cyan').val(),
+                magenta: $('#magenta').val(),
+                amarillo: $('#amarillo').val(),
+                gota_negro: $('#gotaNegro').val(),
+                gota_color: $('#gotaColor').val()
+            }
+
+            if( $('#action').val() == 'edit')
+            {
+                var url_to_go = "/configuracion/papelimpresiontipologias/edit/" + $('#hidden_id').val();
+                formData['id']= $('#hidden_id').val();
+            }
+            else
+            {
+                var url_to_go = "<?= route_to('createPapelImpresionTipologia'); ?>";
+            }
+            
+
+            $.ajax({
+                url: url_to_go,
+                method:"POST",            
+                data: formData,
+                dataType:"JSON",
+                encode: true,
+
+            }).done((data, textStatus, jqXHR) => {
+                $('#tipologiaModal').modal('hide') ;    
+                yeniden(data.<?= csrf_token() ?>);
+
+                theTable.clearPipeline();
+                theTable.draw();
+                Toast.fire({
+                    icon: 'success',
+                    title: data.msg ?? jqXHR.statusText,
+                });
+                
+
+            }).fail((jqXHR, textStatus, errorThrown) => {
+                $('#tipologiaModal').modal('hide') ;
+
+                Toast.fire({
+                    icon: 'error',
+                    title: jqXHR.responseJSON.messages.error,
+                });
+            })
+        }
+    });
+    
+    // Activate an inline edit on click of a table cell
+    $(document).on('click', '.btn-edit', function(e) {
+
+        var id = $(this).attr('data-id');
+        
+        $.ajax({
+
+            url:"<?= route_to('fetchTipologia'); ?>",
+            
+
+            method:"POST",
+
+            data:{id:id,
+                <?= csrf_token() ?? "token" ?> : <?= csrf_token() ?>v},
+
+            dataType:'JSON',
+
+            success:function(response)
+            {
+                yeniden(response.<?= csrf_token() ?>);
+                $('#tipologiaTipo').val(response.data.tipo);
+                $('#negro').val(response.data.negro);
+                $('#cyan').val(response.data.cyan);
+                $('#magenta').val(response.data.magenta);
+                $('#amarillo').val(response.data.amarillo);
+                $('#gotaNegro').val(response.data.gota_negro);
+                $('#gotaColor').val(response.data.gota_color);
+
+                $('#tipologiaTipo').attr('disabled', 'disabled');
+                $('#action').val('edit');
+                $('.modal-title').text('<?= lang('Basic.global.edit') ?>' + ' ' + '<?= lang("PapelImpresion.consumo_tintas_rotativas") ?>');
+                $('#submit_button').val('<?= lang('Basic.global.Save') ?>');
+
+
+                $('#tipologiaModal').modal('show');
+
+                $('#hidden_id').val(id);
+
+            },
+            cache: true
+        })
+
+    });
+
+    $(document).on('click', '.btn-delete', function(e) {
+        Swal.fire({
+            title: '<?= lang('Basic.global.sweet.sureToDeleteTitle', [mb_strtolower(lang('PapelImpresion.consumo_tintas_rotativas'))]) ?>',
+            text: '<?= lang('Basic.global.sweet.sureToDeleteText') ?>',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            confirmButtonText: '<?= lang('Basic.global.sweet.deleteConfirmationButton') ?>',
+            cancelButtonText: '<?= lang('Basic.global.Cancel') ?>',
+            cancelButtonColor: '#d33'
+        })
+        .then((result) => {
+            const dataId = $(this).data('id');
+            const row = $(this).closest('tr');
+            if (result.value) {
+                $.ajax({
+                    url: `/configuracion/papelimpresiontipologias/delete/${dataId}`,
+                    method: 'GET',
+                    dataType: "json",
+                }).done((data, textStatus, jqXHR) => {
+                    
+                    Toast.fire({
+                        icon: 'success',
+                        title: data.msg ?? jqXHR.statusText,
+                    });
+                    
+                    
+                    theTable.clearPipeline();
+                    theTable.row($(row)).invalidate().draw();
+                }).fail((jqXHR, textStatus, errorThrown) => {
+                    Toast.fire({
+                        icon: 'error',
+                        title: jqXHR.responseJSON.messages.error,
+                    });
+                })
+            }
+        });
+    });
+    
     $('#papelGenericoId').select2({
         theme: 'bootstrap-5',
         allowClear: false,
-        ajax: {
+        ajax: { 
             url: '<?= route_to("menuItemsOfPapelesGenericos") ?>',
             type: 'post',
             dataType: 'json',
@@ -60,4 +506,25 @@
     });
 
 
+    
+    
 <?= $this->endSection() ?>
+
+<?=$this->section('css') ?>
+    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.<?=config('Basics')->theme['name'] == 'Bootstrap5' ? 'bootstrap5' : 'bootstrap4' ?>.min.css">
+<?=$this->endSection() ?>
+
+
+<?= $this->section('additionalExternalJs') ?>
+    <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.<?=config('Basics')->theme['name'] == 'Bootstrap5' ? 'bootstrap5' : 'bootstrap4' ?>.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.0/jszip.min.js" integrity="sha512-xcHCGC5tQ0SHlRX8Anbz6oy/OullASJkEhb4gjkneVpGE3/QGYejf14CUO5n5q5paiHfRFTa9HKgByxzidw2Bw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/pdfmake.min.js" integrity="sha512-rDbVu5s98lzXZsmJoMa0DjHNE+RwPJACogUCLyq3Xxm2kJO6qsQwjbE5NDk2DqmlKcxDirCnU1wAzVLe12IM3w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/vfs_fonts.js" integrity="sha512-cktKDgjEiIkPVHYbn8bh/FEyYxmt4JDJJjOCu5/FQAkW4bc911XtKYValiyzBiJigjVEvrIAyQFEbRJZyDA1wQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+<?=$this->endSection() ?>
+

ci4/app/Views/themes/backend/vuexy/form/configuracion/papel/viewPapelImpresionList.php

@@ -45,75 +45,74 @@
 
 <?=$this->section('additionalInlineJs') ?>
     
-            const lastColNr = $('#tableOfPapelesimpresion').find("tr:first th").length - 1;
-            const actionBtns = function(data) {
-                return `<td class="text-right py-0 align-middle">
-                        <div class="btn-group btn-group-sm">
-                            <button class="btn btn-sm btn-warning btn-edit me-1" data-id="${data.id}"><?= lang('Basic.global.edit') ?></button>
-                            <button class="btn btn-sm btn-danger btn-delete ms-1" data-id="${data.id}"><?= lang('Basic.global.Delete') ?></button>
-                        </div>
-                        </td>`;
-            };
-            theTable = $('#tableOfPapelesimpresion').DataTable({
-                processing: true,
-                serverSide: true,
-                autoWidth: true,
-                responsive: true,
-                scrollX: true,
-                lengthMenu: [ 5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500 ],
-                pageLength: 10,
-                lengthChange: true,
-                "dom": 'lfBrtip', // 'lfBrtip', // you can try different layout combinations by uncommenting one or the other
-		// "dom": '<"top"lf><"clear">rt<"bottom"ipB><"clear">',  // remember to comment this line if you uncomment the above
-		"buttons": [
-			'copy', 'csv', 'excel', 'print', {
-				extend: 'pdfHtml5',
-				orientation: 'landscape',
-				pageSize: 'A4'
-			}
-		],
-                stateSave: true,
-                order: [[1, 'asc']],
-                language: {
-                    url: "//cdn.datatables.net/plug-ins/1.13.4/i18n/<?= config('Basics')->i18n ?>.json"
-                },
-                ajax : $.fn.dataTable.pipeline( {
-                    url: '<?= route_to('dataTableOfPapelesImpresion') ?>',
-                    method: 'POST',
-                    headers: {'X-Requested-With': 'XMLHttpRequest'},
-                    async: true,
-                }),
-                columnDefs: [
-                    {
-                        orderable: false,
-                        searchable: false,
-                        targets: [3, 4, 5, 6, 7, lastColNr] //JJO añadidas bool cols
-                    }
-                ],
-                columns : [
-					{ 'data': 'nombre' },
-                    { 'data': 'papel_generico_id' },
-					{ 'data': 'gramaje' },
-                    { 'data': 'bn' },
-					{ 'data': 'color' },
-					{ 'data': 'portada' },
-					{ 'data': 'cubierta' },
-					{ 'data': 'rotativa' },
-                    { 'data': actionBtns }
-                ]
-            });
-
-    
-        theTable.on( 'draw.dt', function () {
-                const boolCols = [3, 4, 5, 6, 7];
-            for (let coln of boolCols) {
-                theTable.column(coln, { page: 'current' }).nodes().each( function (cell, i) {
-                    cell.innerHTML = cell.innerHTML == '1' ? '<i class="ti ti-check"></i>' : '';
-                });
+    const lastColNr = $('#tableOfPapelesimpresion').find("tr:first th").length - 1;
+    const actionBtns = function(data) {
+        return `<td class="text-right py-0 align-middle">
+                <div class="btn-group btn-group-sm">
+                    <i class="ti ti-pencil ti-sm btn-edit mx-2" data-id="${data.id}"></i>
+                    <i class="ti ti-trash ti-sm btn-delete mx-2" data-id="${data.id}"></i>
+                </div>
+                </td>`;
+    };
+    theTable = $('#tableOfPapelesimpresion').DataTable({
+        processing: true,
+        serverSide: true,
+        autoWidth: true,
+        responsive: true,
+        scrollX: true,
+        lengthMenu: [ 5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500 ],
+        pageLength: 10,
+        lengthChange: true,
+        "dom": 'lfBrtip', // 'lfBrtip', // you can try different layout combinations by uncommenting one or the other
+        // "dom": '<"top"lf><"clear">rt<"bottom"ipB><"clear">',  // remember to comment this line if you uncomment the above
+        "buttons": [
+            'copy', 'csv', 'excel', 'print', {
+                extend: 'pdfHtml5',
+                orientation: 'landscape',
+                pageSize: 'A4'
             }
-        
+        ],
+        stateSave: true,
+        order: [[1, 'asc']],
+        language: {
+            url: "//cdn.datatables.net/plug-ins/1.13.4/i18n/<?= config('Basics')->i18n ?>.json"
+        },
+        ajax : $.fn.dataTable.pipeline( {
+            url: '<?= route_to('dataTableOfPapelesImpresion') ?>',
+            method: 'POST',
+            headers: {'X-Requested-With': 'XMLHttpRequest'},
+            async: true,
+        }),
+        columnDefs: [
+            {
+                orderable: false,
+                searchable: false,
+                targets: [3, 4, 5, 6, 7, lastColNr] //JJO añadidas bool cols
+            }
+        ],
+        columns : [
+            { 'data': 'nombre' },
+            { 'data': 'papel_generico_id' },
+            { 'data': 'gramaje' },
+            { 'data': 'bn' },
+            { 'data': 'color' },
+            { 'data': 'portada' },
+            { 'data': 'cubierta' },
+            { 'data': 'rotativa' },
+            { 'data': actionBtns }
+        ]
     });
 
+
+theTable.on( 'draw.dt', function () {
+        const boolCols = [3, 4, 5, 6, 7];
+    for (let coln of boolCols) {
+        theTable.column(coln, { page: 'current' }).nodes().each( function (cell, i) {
+            cell.innerHTML = cell.innerHTML == '1' ? '<i class="ti ti-check"></i>' : '';
+        });
+    }
+});
+
 $(document).on('click', '.btn-edit', function(e) {
         //window.location.href = `<?= route_to('papelImpresionList') ?>/${$(this).attr('data-id')}/edit`;
         window.location.href = `/configuracion/papelesimpresion/edit/${$(this).attr('data-id')}`;
@@ -178,6 +177,5 @@ $(document).on('click', '.btn-delete', function(e) {
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/pdfmake.min.js" integrity="sha512-rDbVu5s98lzXZsmJoMa0DjHNE+RwPJACogUCLyq3Xxm2kJO6qsQwjbE5NDk2DqmlKcxDirCnU1wAzVLe12IM3w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/vfs_fonts.js" integrity="sha512-cktKDgjEiIkPVHYbn8bh/FEyYxmt4JDJJjOCu5/FQAkW4bc911XtKYValiyzBiJigjVEvrIAyQFEbRJZyDA1wQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-
 <?=$this->endSection() ?>