mercredi 16 février 2022

show data in column datatables

I´m traying to show items for my contracts in my datatable i´m working with laravel 5.6 and i send all my data from my controller and i´m doing a console.log for my variable and i can show it, but in my function render i can´t show my items i don´t know that i´m doing wrong.

<script>

        jQuery(function(){
            var $tabla = window.One._lMain.find("#contratos");
            var $btnestados = window.One._lMain.find(".btn-estados");
            var productos = @json($productos);

            jQuery.extend(jQuery.fn.dataTable.ext.classes, {
                sWrapper: "dataTables_wrapper dt-bootstrap4",
                sFilterInput:  "form-control form-control-sm",
                sLengthSelect: "form-control form-control-sm",
                
            });

            // Override a few defaults
            /*jQuery.extend(true, jQuery.fn.dataTable.defaults, {
                pageLength: 15,
                lengthMenu: [ 15, 25, 50, 75, 100 ],
                autoWidth: true,
                info: "simple",
                buttons: true,
                language: {
                    url: ""
                }
            });*/

            $btnestados.on( 'click', function() {
                $btnestados.blur();
                var texto = $(this).data("estado");

                $btnestados.removeClass("active");

                $(this).addClass("active");

                table.columns( 10 ).search(  $(this).data("estado").trim() )
                .draw();
            });

            function format (data) {
                var html = '<table class="table table-borderless font-size-sm" cellspacing="0" border="0" p-4"><tbody>'+
                            '<tr>'+
                                '<td class="font-w600 pl-4">Cliente.:</td>'+
                                '<td>'+data.cliente+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="font-w600 pl-4">Dirección de instalación.:</td>'+
                                '<td>'+data.direccion+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="font-w600 pl-4">Provincia.:</td>'+
                                '<td>'+data.provincia+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="font-w600 pl-4">Población.:</td>'+
                                '<td>'+data.poblacion+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="font-w600 pl-4">C.P.:</td>'+
                                '<td>'+data.cp+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="font-w600 pl-4">Tlf. Fijo.:</td>'+
                                '<td>'+(data.fijo === null ? '' : data.fijo)+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="font-w600 pl-4">Tlf. Móvil.:</td>'+
                                '<td>'+(data.movil === null ? '' : data.movil)+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="font-w600 pl-4">Instalador.:</td>'+
                                '<td>'+data.instalador.nombre+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="font-w600 pl-4">Asignado por.:</td>'+
                                '<td>'+data.historicos[0].empleado.nombre+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="font-w600 pl-4">Observaciones.:</td>'+
                                '<td>'+(data.observaciones === null ? '' : data.observaciones)+'</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td colspan="2" class="font-w600 pl-4 mt-2">Artículos para instalar<hr style="margin: 2px;"></td>'+
                            '</tr>';

                            if(data.productos) {
                                for(var x = 0; x < (data.productos).length; x++) {
                                let producto = productos.productos[data.productos[x]];

                                html += '<tr>'+
                                            '<td class="pl-4" colspan=""><span style="font-weight: bold;">'+producto.text+'</span></td>'+
                                        '</tr>';
                                }
                                html += '</tbody></table>';
                            }   else    {
                                for(var x = 0; x < (data.articulos).length; x++) {
                                    let producto = data.articulos[x];

                                    html += '<tr>'+
                                                '<td class="pl-4" colspan=""><span style="font-weight: bold;">'+producto.ref+' - '+producto.descripcion+'</span></td>'+
                                            '</tr>';
                                    }
                                html += '</tbody></table>';
                            }
                return html;
            }

            var table = $tabla.DataTable({
                pageLength: 15,
                lengthMenu: [ 15, 25, 50, 75, 100, 200 ],
                autoWidth: true,
                info: "simple",
                dom: 'Bfrtip',
                buttons: [
                    'pdf',
                ],
                language: {
                    url: ""
                },
                
                order: [[11, 'desc']],
                data: @json($partes),
                initComplete: function( settings, json ) {
                    $tabla.find(".js-tooltip").tooltip();
                    // style for button export
                    var btns = $('.dt-button');
                    btns.addClass('btn btn-info');
                    
                },
                columns: [
                    /*{
                        data: null,
                        name: 'moredetails',
                        className: 'open-mdl',
                        defaultContent: '<i class="far fa-edit"></i>',
                        searchable: false, orderable: false, search: {value: null, regex: "false"}
                    },*/
                    {data: null, className: "text-center more-details", defaultContent: '<i class="far fa-plus-square"></i>'},
                    {
                        data: 'n_contrato', name: 'n_contrato', className: 'font-w600', searchable: true, orderable: true, search: {value: null, regex: "false"},
                        render: function(data, type, row) {
                            return row.serie+'-'+row.n_contrato+ ' - ' +row.id;
                        }
                    },
                    {data: 'cliente', name: 'cliente', className: 'd-none d-md-table-cell font-w600',  searchable: true, orderable: true, search: {value: null, regex: "false"}},
                    //{data: 'direccion', name: 'direccion', className: 'd-none d-lg-table-cell', searchable: true, orderable: true, search: {value: null, regex: "false"}},
                    {data: 'provincia', name: 'provincia', className: 'd-none d-sm-table-cell d-xl-table-cell', searchable: true, orderable: true, search: {value: null, regex: "false"}},
                    {data: 'poblacion', name: 'poblacion', className: 'd-none d-sm-table-cell d-xl-table-cell', searchable: true, orderable: true, search: {value: null, regex: "false"}},
                    //{data: 'cp',        name: 'cp', className: 'd-none d-xl-table-cell', searchable: true, orderable: true, search: {value: null, regex: "false"}},
                    {data: 'fijo',      name: 'fijo', className: 'd-none', searchable: false, orderable: true, search: {value: null, regex: "false"}},
                    {data: 'movil',     name: 'movil', className: 'd-none', searchable: false, orderable: true, search: {value: null, regex: "false"}},
                    {data: 'instalador.nombre', name: 'instalador', className: 'd-none', searchable: true},
                    {data: 'span_estado', name: 'span_estado', className: 'd-none d-md-table-cell text-center', searchable: true, orderable: false},
                    {data: {_:"fecha", sort:"fechauk"}, name: 'fecha', className: 'd-none d-md-table-cell', searchable: true, orderable: true, search: {value: null, regex: "false"}},
                    { "defaultContent": "", render: function (productos, type, row) {
                            $.each(row.articulos, function(key, value) {
                                console.log(value.descripcion);
                                return '<span class="badge bg-info text-white">'+value.descripcion+'</span>';
                            });
                        },
                    },

                    { data: 'btn_parte', name: 'btn_parte', className: "text-center", searchable: false, orderable: false }
                ],
                /*dom:
                    "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-2'><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-12'p>>",*/
            });

            $tabla.on('click', 'td.more-details', function () {
                var tr = $(this).parent();
                var row = table.row( tr )

                if ( row.child.isShown() ) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.find(":first i").attr('class', 'far fa-plus-square');
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child( format(row.data()) ).show();
                    tr.find(":first i").attr('class', 'far fa-minus-square');

                    tr.addClass('shown');
                }
            });
        });
    </script>

this it´s my function to create my datatable. Variable "$productos" it´s my items and my variable "$partes" it´s all my contracts.

In my console.log from my function render in defaultContent

FILTRO SEDIMENTO + CARBÓN PP + C, FILTRO CARBÓN + REMINERALIZADOR ALCALINO T-33
partes:819 DEPURADORA FLUJO DIRECTO AQUALUXE PREMIUM 2.0
partes:819 FILTRO SEDIMENTO + CARBON PP+C, FILTRO CARBON + REMINERALIZADOR ALCALINO T-33
2partes:819 DCALUXE PRO 2.0 DESINCRUSTADOR ELECTRONICO
partes:819 DEPURADORA FLUJO DIRECTO AQUALUXE PREMIUM 2.0
partes:819 DCALUXE PRO 2.0 DESINCRUSTADOR ELECTRONICO
partes:819 JUEGO FILTROS AQUALUXE 2 DE CARBON +1 SEDIMENTOS BAYONETA

this it´s a examples.

Thanks for help me and readme



from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/utVHGUw
via IFTTT

Aucun commentaire:

Enregistrer un commentaire