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
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire