数据表列在第一次加载时没有得到合适的宽度
Datatables columns don't get fit width when it first loads?
我想知道为什么我的数据表在第一次加载时没有得到合适的宽度列,但是当我做任何更改时,如ordered, sreach或select,它得到合适的列宽度。这是我的数据表,当它第一次加载(https://postimg.org/image/vw4lvp3db/)这里是我的数据表,当我从任何列选择任何数据(https://postimg.org/image/k0sagi7vl/)这是我的HTML表格文件
<table id="laporan_temuan" class="table table-hover table-bordered">
<thead>
<td style="">No</td>
<td style="">No BA</td>
<td style="">Tanggal ditemukan</td>
<td style="">Penyelia</td>
<td style="">Manager</td>
<td style="">Operator</td>
<td style="">Saksi</td>
<td style="">Cabang</td>
<td style="">Teler</td>
<td style="">Jam</td>
<td style="">Tanggal Ban-banan</td>
<td style="">Temuan</td>
<td style="">Denom</td>
<td style="">Jumlah</td>
<td style="">No Seri</td>
<td style="">Total</td>
<td style="">AKSI</td>
</thead>
<tfoot>
<td style="">No</td>
<td style="">No BA</td>
<td style="">Tanggal ditemukan</td>
<td style="">Penyelia</td>
<td style="">Manager</td>
<td style="">Operator</td>
<td style="">Saksi</td>
<td style="">Cabang</td>
<td style="">Teler</td>
<td style="">Jam</td>
<td style="">Tanggal Ban-banan</td>
<td style="">Temuan</td>
<td style="">Denom</td>
<td style="">Jumlah</td>
<td style="">No Seri</td>
<td style="">Total</td>
<td >AKSI</td>
</tfoot>
<tbody>
</tbody>
</table>
这是我的js文件
$("#laporan_temuan").DataTable({
//"aLengthMenu":[[5,15,30,-1],[5,15,30,"All"]],
"pageLength":5,
"columnDefs": [
{ "width": "4%", "targets": 0 },
{ "width": "10%", "targets": 1 },
{ "width": "10.5%", "targets": 2 },
{ "width": "11.8%", "targets": 3 },
{ "width": "12%", "targets": 4 },
{ "width": "13.8%", "targets": 5 },
{ "width": "13.8%", "targets": 6 },
{ "width": "15%", "targets": 8 },
{ "width": "20%", "targets": 10 },
{ "width": "25%", "targets": 14 },
{ "width": "15%", "targets": 16 },
],
"lengthChange": false,
//button-button untuk export ke cetak, excel, dan pdf
dom :'Bfrtip',
buttons:[
{
extend: 'print',
className: 'btn btn-default'
},
{
extend:'excelHtml5',
className: 'btn btn-success',
text: 'EXCEL'
}
],
"ordering":true,
scrollX:true,
ajax:{
url: "{{url('laporantemuanajax')}}",
dataSrc:''
},columns:[
{data:'no'},
{data:'no_ba'},
{data:'tanggal_ditemukan'},
{data:'penyelia'},
{data:'manajer'},
{data:'operator'},
{data:'saksi'},
{data:'cabang'},
{data:'teler'},
{data:'jam'},
{data:'tanggal_banbanan'},
{data:'temuan'},
{data:'denom'},
{data:'jumlah'},
{data:'no_seri'},
{data:'total'},
{data:'aksi'},
],
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
},
language:{
"search":"Goleti Data",
"zeroRecords":"Ora ana data sing pada karo sing koen maksud",
"lengthMenu":"Munculna _MENU_ data",
"info":"Munculna sing _START_ kosi _END_ sing _TOTAL_ data",
"infoFiltered":"(disaring sing _TOTAL_ kabehe data)",
"infoEmpty":"Munculna sing 0 kosi 0 sing 0 data"
}
});
我的数据表有什么问题?
当你第一次初始化DataTable时你的表是可见的吗?如果没有,您可能需要在它变得可见时立即调用以下代码:
$("#laporan_temuan").DataTable().columns.adjust().draw()
另外,我注意到您在初始化时定义了列宽度。如果您希望列使用最佳匹配,则可能应该删除以下内容:
"columnDefs": [
{ "width": "4%", "targets": 0 },
{ "width": "10%", "targets": 1 },
{ "width": "10.5%", "targets": 2 },
{ "width": "11.8%", "targets": 3 },
{ "width": "12%", "targets": 4 },
{ "width": "13.8%", "targets": 5 },
{ "width": "13.8%", "targets": 6 },
{ "width": "15%", "targets": 8 },
{ "width": "20%", "targets": 10 },
{ "width": "25%", "targets": 14 },
{ "width": "15%", "targets": 16 },
],
相关文章:
- addClass,它更改bg图像,但在第一次加载时没有闪烁
- Cordova AngularJS Ionic标签的内容在第一次加载时重叠
- jQuery Mobile pageinit在第一次加载页面上不起作用(可复制)
- jquery复选框仅在第一次加载时触发
- 仅在第一次加载页面时在第一张幻灯片上添加类
- 为什么不'当页面第一次加载时,t用户会在Angular中看到{{handlebas表达式}}
- jQuery插件-仅在第一次加载时工作
- javascript设置第一次加载页面时ipad的绝对位置
- Kml层在刷新后工作正常,但给定typeError:无法读取属性getMap.第一次加载时
- 如何仅在第一次加载页面时设置弹出窗口
- 在第一次加载时立即执行设置间隔
- Jquery 循环在第一次加载时未正确加载样式
- 在第一次加载本身中更快地加载 javascript
- Nivoslider(在动态 ajax 内容中)不会在第一次加载时加载图像
- javascript load()方法在第一次加载资源后缓存资源
- Rails应用程序中的JS仅在第一次加载时加载
- 如何在第一次加载页面时忽略trigger()方法
- 第一次加载页面时未触发的单击事件
- 在第一次加载时运行快速Javascript基准测试
- Javascript函数赢得't第一次加载页面