Question

有一个dataTable：

<table id="list_details_livraison" class="striped cell-hovered border bordered" data-searching="true">
    <thead>
        <tr>
            <th style="text-align: center;"><?php echo _getText('detaillivraison.entete.article');?></th>
            <th style="text-align: center;"><?php echo _getText('detaillivraison.entete.lot');?></th>
            <th style="text-align: center;"><?php echo _getText('detaillivraison.entete.qtelivrer');?></th>
            <th style="text-align: center;"><?php echo _getText('detaillivraison.entete.pu');?></th>
            <th style="text-align: center;"><?php echo _getText('detaillivraison.entete.taxe');?></th>
            <th style="text-align: center;"><?php echo _getText('detaillivraison.entete.remise');?></th>
            <th style="text-align: center;"><?php echo _getText('detaillivraison.entete.prixtotal');?></th>
            <th style="text-align: center;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

$(document).ready(function(){
    $('#list_details_livraison').attr('style', 'width:100%');

    $('#list_details_livraison').DataTable({
            responsive: true,
            "oLanguage": {
                // switch lang here with a PHP variable 
                "sUrl": "<?php  echo RP_LANG ?>fr_FR.txt",
            },
            "processing": true,
            "serverSide": true,
            ajax: "<?php  echo RP_SSP ?>server_processing_details_livraisons.php?livc_code=<?php echo $data[0]['livc_code']; ?>",  
            "aoColumnDefs": 
                [
                {
                    "aTargets": [7],
                    "mData": 7,
                    "mRender": function (data, type, full) {
                                if (isDetailLivraisonValider(data)) {
                                    return '<div style="text-align:center;">'+
                                            '<span class="mif-checkmark mif-2x fg-lightGreen"></span>'+
                                          '</div>';
                                } else {
                                    var livraison = '\''+full [1]+'\'';
                                    return '<div style="text-align:center;">'+
                                            '<a href="../../RestaurantLivraison/modifierDetail/'+ data +'" style="margin-right: 8px;"><span class="mif-pencil mif-2x"></span></a>'+
                                            '<a href="#" id="staticDialog" onclick="afficheDlg(\''+ data +'\','+livraison+')" style="color:red;"><span class="mif-cross mif-2x"></span></a>'+
                                          '</div>';
                                }
                     }
                }],
                "aLengthMenu": [[10, 25,50,100, -1], [10, 25,50,100, "Tout"]],
                "initComplete": function(settings, json) {
                                    var html = $(this).find("tbody").find("tr").html();
                                    if (html.indexOf("dataTables_empty") != -1)
                                        $("#btn_valider").hide();
                                }
        });
});

即使要显示的数据只有3个字符且标题标签只是4个字母的单词，dataTable仍然会占用大量空间来占用数据：

如何制作例如第五栏，减税，适当调整大小，以便不再浪费空间？

Answer 1

使用

.table{width:auto;table-layout:fixed}

这样就可以了解

注意：请记住从所有<th>

中删除静态宽度

如何拉伸dataTable列以适合它们所代表的数据？

1 个答案: