列使用DataTable fixedColumns未对齐 [英] Column misaligned using DataTable fixedColumns

问题描述

当我使用fixedColumns属性时，我有一个错误。

I have a bug when I use fixedColumns property.

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

The strange thing is that this bug does not happen always, but sometimes. And I don't know why.

这是错误：

< a href =https://i.stack.imgur.com/wyizi.png =nofollow noreferrer>

您可以看到第一列（我已修复）的行未对齐。
而且，在右下角有Primo，Precedente等按钮，但没有正确显示。

Like you can see the row of the first column (that I have fixed) are misaligned. And, in the right bottom there are the buttons "Primo", "Precedente" .. etc.. that are not correctly displayed.

这是表格的代码（我使用的是Thymeleaf来显示数据会话属性）：

<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中识别要修复的列。

is used from the js to identify the columns to fix.

这是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事件）：

But, If I click on one of the columns in the heading (Prog., Tipo, Nome File.. etc), the table is correctly displayed (when I click on one of them the rows are ordered by what I have clicked, but this is not a js event):

推荐答案

$（＃tableID ）。DataTable（）。columns.adjust（）。draw（）; 使用它解决了我的问题。
从数据表函数生成表后添加此项。
参考

$("#tableID").DataTable().columns.adjust().draw(); use this it solved my problem. Add this after the table has generated from datatable function. Reference

这篇关于列使用DataTable fixedColumns未对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！