Question

我想知道为什么我的数据表在第一次加载时没有得到适合的宽度列，但是当我进行任何更改（如有序，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"
    }
});

我的数据表有什么问题？

Answer 1

首次初始化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 },
  ],

数据表列首次加载时不适合宽度？

1 个答案: