javascript - 使用 DataTable 固定列未对齐列

Question

当我使用fixedColumns属性时，我遇到了一个错误。

奇怪的是，这个错误并不总是发生，而是有时发生。我也不知道为什么。

这是错误:

就像您可以看到第一列的行(我已修复)未对齐。并且，在右下角有按钮“Primo”、“Precedente”..等未正确显示。

这是表的代码(我使用 Thymeleaf 来显示数据 session 属性):

<table id="table" data-fixedLeftColumns="1" class="display noscroll sortable " style="max-width: 100%;" >
    <thead>
        <tr>
            <th>Prog.</th>
            <th>Tipo</th>
            <th>Nome file</th>  
            <th>Data emissione</th> 
            <th>Num.</th>           
            <th>Importo totale</th>                     
            <th>Importo quota Miur</th>         
            <th>Nota</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="...">                                      
            <td th:text="..." ></td>
            <td style="white-space: nowrap" th:text="..." ></td>
            <td style="white-space: nowrap">
                <a th:id="..." th:value="..." >
                <img class="tableIcon" th:src="..." title="..."/>
                <span style="vertical-align: middle;" th:text="..." ></span>
                </a>
            </td>                                                                                   
            <td th:text="..." ></td>    
            <td th:text="..." ></td>
            <td th:text="..." style="text-align: right;"></td>  
            <td th:text="..." style="text-align: right;"></td>  
            <td style="text-align: center;">
                <img th:if="..." th:name="..." th:id="..." class="tableIcon" th:src="..." title="Leggi nota" />
            </td>

        </tr>
    </tbody>

 data-fixedLeftColumns="1"

在 js 中使用来标识要修复的列。

这是 js:

    var fixedLeftColumns, fixedRightColumns;

    $("#table").attr("data-fixedLeftColumns") === undefined ? 
            fixedLeftColumns = "0" : fixedLeftColumns = $(this).attr("data-fixedLeftColumns");

    $("#table").attr("data-fixedRightColumns") === undefined ? 
            fixedRightColumns = "0" : fixedRightColumns = $("#table").attr("data-fixedRightColumns");

    var dtSettings = {
            iDisplayLength : 10,
            bJQueryUI : true,
            bInfo : !$(this).hasClass('simple'),
            bDestroy : true,
            bFilter : !$(this).hasClass('simple'),
            bAutoWidth : false,
            bPaginate : !$(this).hasClass('simple'),
            sPaginationType : 'full_numbers',
            scrollCollapse : true,
            bLengthChange : true,
            stateSave : true,
            bSort : $(this).hasClass('sortable'),
            aaSorting : [],
            oLanguage : tableLocale,
            "lengthMenu" : [ [ 10, 25, 50, -1 ], [ 10, 25, 50, "Tutte" ] ],
            aoColumnDefs : [ {
                bSortable : false,
                aTargets : [ "non-sortable" ]
            } ],
            fnFooterCallback : footerCallback,
            fixedColumns: {
                leftColumns: fixedLeftColumns,
                rightColumns: fixedRightColumns
            }
        };
   $("#table").dataTable(dtSettings);

但是，如果我单击标题中的一列(Prog.、Tipo、Nome File.. 等)，表格将正确显示(当我单击其中一列时，行将按我所拥有的内容排序)点击了，但这不是js事件):

Answer 1

$("#tableID").DataTable().columns.adjust().draw(); 使用它解决了我的问题。在从数据表函数生成表后添加此内容。 Reference