Column misaligned using DataTable fixedColumns

davidefruci

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.

This is the bug: http://i.stack.imgur.com/wyIZi.png

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.

This is the code of the table (I'm using Thymeleaf to display data session attribute):

<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", is used from the js to identify the columns to fix.

Here's the 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);

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): http://i.stack.imgur.com/AZNbu.png

If I don't use fixedColumns property, there are not problem.

But, I need to do this. So, there are other ways to implement fixedColumns? Or how can I solve the problem above? Thank you.