Laravel 数据表头不';内部渲染不好
我正在使用Laravel 数据表头不';内部渲染不好,laravel,vue.js,datatables,Laravel,Vue.js,Datatables,我正在使用modals,并在它们内部创建Datatables。但有一种行为我一点也不理解。当我发送数据并创建数据表时,有时渲染不好。这里有一个关于我的意思的例子 但问题是,它只会发生就像我打开modal的40%的时候一样。我不知道为什么会这样。这是我的模态代码和Vue函数 <div class="modal fade" id="detallePresupuestoTransferencia" tabindex="-1" role="dialog"> <div clas
modals
,并在它们内部创建Datatables
。但有一种行为我一点也不理解。当我发送数据并创建数据表时,有时渲染不好。这里有一个关于我的意思的例子
但问题是,它只会发生就像我打开modal的40%的时候一样。我不知道为什么会这样。这是我的模态代码和Vue函数
<div class="modal fade" id="detallePresupuestoTransferencia" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content" style="border-radius: 10px;">
<input id="idDetallePresupuesto" type="hidden">
<input id="idDetalleTipo" type="hidden">
<div class="modal-header" style="height: 58px;">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h3 id="titulo" style="color: #3C8DBC; margin-top: 1px;"><strong>{{ __("Movements") }}</strong></h3>
</div>
<div class="modal-body" style="overflow-y:auto;">
<div class="panel panel-default">
<div class="panel-heading">
<strong>TYPE:
<span id="detalleEspecifica"></span>
<span id="subtituloT"></span>
</strong>
<strong style='float:right;'>TYPE2:
<span id="tipoT"></span>
</strong>
</div>
<div class="panel-body">
<div class="table-responsive-lg">
<table id="table1" class="table table-bordered table-condensed table-striped nowrap" style="width:100%; table-layout:fixed;">
<thead>
<tr style="background: #B7CEEC;">
<th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Date")) }}</th>
<th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Amount 1")) }}</th>
<th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Amount 2")) }}</th>
<th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Amount 3")) }}</th>
<th style="font-size:11px; text-align: center; vertical-align: middle;">{!! strtoupper(__("Amount<br>5")) !!}</th>
<th style="font-size:11px; text-align: center; vertical-align: middle;">{!! strtoupper(__("Final<br>Amount")) !!}</th>
<th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Final Amount 2")) }}</th>
</tr>
</thead>
<tbody style="text-align: center; vertical-align: middle;">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
有人能告诉我这种行为的原因吗?我做错了什么
我重复一遍,这只是发生在我打开模态的40%的时候,60%的时候我打开它完全渲染
var url= '...';
$('#table1').DataTable({
"scrollX": true,
"scrollY": 300,
"ordering": false,
"scrollCollapse": true,
"pageLength": 10,
"bFilter": false,
"bLengthChange": false,
"bAutoWidth": false,
"lengthMenu": [[5,10,25,50,75,100,-1 ],[5,10, 25, 50, 750, "All"]],
dom:'<"div-longitud col-md-4"l><"div-botones col-md-4 text-center"B><"div-filtrado col-md-4"f>rt<"div-indice col-md-6"i><"div-paginacion col-md-6"p><"clear">',
language:language.languageDataTables(),
"ajax": {
"url": url,
"type": "POST",
"data": data
},
columns: [
{data: 'date', "width": "9%"},
{data: 'amount 1', "width": "9%"},
{data: 'amount 2', "width": "27%"},
{data: 'amount 3', "width": "27%"},
{data: 'amount 4'},
{data: 'amount 5'},
{data: 'amount 6}
],
buttons: [{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'Exportar a Excel',
title: 'MOVEMENTS',
className: 'btn btn-success btn-xs',
exportOptions: {
columns: [0,1,2,3,4,5,6]
},
autoFilter: true
}],
destroy:true,
});
return Datatables::of($data)->make(true);