Заголовок jQuery Datatables смещен по вертикали

Question

Я опубликовал это на форумах datatables.net, но через неделю ответа по-прежнему нет. Надеюсь, я смогу найти помощь здесь ...

Я использую datatables версии 1.8.1, и мне снятся кошмары из-за выравнивания заголовков столбцов с включенной вертикальной прокруткой.

С кодом, размещенным ниже, заголовки корректно выстраиваются в Firefox и IE8 и IE9, но Chrome и IE7 отключены. Я использую много таблиц данных в этом проекте, и это проблема для каждого. Я отчаянно нуждаюсь в помощи!

РЕДАКТИРОВАТЬ: я понял, что это как-то связано с настройкой ширины таблицы. Datatable принимает ширину своего контейнера. Если я не установил ширину, все выравнивается нормально (но таблица слишком велика для того места, где она мне нужна на странице). Если я вообще укажу ширину таблицы (или родительского элемента где-то выше), заголовки не будут правильно выстроены.

Спасибо !!

Скриншоты:

www.dennissheppard.net / firefox_alignment.png

www.dennissheppard.net / chrome_alignment.png

www.dennissheppard.net / ie7_alignment.png

otable = $('#order_review_grid').dataTable({                
    'fnRowCallback': function (nRow, strings, displayIndex, dataIndex) {
        return formatRow(nRow, dataIndex);
    },
    'fnDrawCallback':function()
    {
        checkIfOrderSubmitted(this);                    
    },
    'aoColumnDefs':
    [
        { 'bVisible': false, 'aTargets': [COL_PRODUCT] },
        { 'bSortable': false, 'aTargets': [COL_IMAGE, COL_DELETE] },
        { 'sClass': 'right_align', 'aTargets': [COL_PRICE] },
        { 'sClass': 'center_align', 'aTargets': [COL_BRAND,COL_PACK] },
        { 'sClass': 'left_align', 'aTargets': [COL_DESCRIPTION] }
    ],
    'sDom': 't',
    'sScrollY':'405px',
    'bScrollCollapse':true,
    'aaSorting':[]
});

<table id="order_review_grid" class="grid_table" cellpadding="0px" cellspacing="0px">                 
    <thead class="grid_column_header_row" id="order_review_grid_column_header_row">
        <tr>
            <td class="" id='sequenceNumber'>SEQ #</td>
            <td class="grid_sc_header" id='statusCode'>Sc</td>
            <td class="grid_sc_header" id='onOrderGuide'>O.G.</td>
            <td class="grid_image_header" id='image'>Image</td>                         
            <td class="grid_description_header" id='description'>Description</td>                           
            <td class="grid_brand_header" id='label'>Brand</td>
            <td class="grid_pack_header" id='packSize'>Pack</td>
            <td class="grid_price_header" id='price'>Price</td>
            <td class="grid_qtrfull_header" id='caseQuantity'>Full</td>
            <td class="grid_qtrypart_header" id='eachQuantity'>Partial</td>
            <td class="grid_refnum_header" id='referenceNumber'>Ref #</td>
            <td class="grid_refnum_header">&nbsp;</td>
        </tr>
    </thead>
    <tbody class="">
        <!-- loaded data will go here -->
    </tbody>
</table>

Answer 1

У меня тут такая же проблема. В Mozilla Firefox, Opera он отлично работает (с выравниванием по пикселям), но не в Chrome 21.

Решение:

Как упомянуто в этом сообщении http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1

По сути, происходит то, что DataTables пытается прочитать ширина таблицы, которую нарисовал браузер, так что он может сделать совпадение заголовка. Проблема в том, что когда DataTables делает это расчет на вашей странице, браузер не показал полосу прокрутки - и следовательно, расчет немного ошибочен! Причина, по которой я предлагаю это ошибка WebKit, даже если DataTables прошел через все из его логики, полоса прокрутки все еще не отображалась. Если вы добавите следующий код вы можете увидеть эффект этого:

console.log ($ (oTable.fnSettings (). NTable) .outerWidth ()); setTimeout (function () { console.log ($ (oTable.fnSettings (). nTable) .outerWidth ()); }, 1);

Интересно то, что после того, как я добавил setTimeout и после его выполнения, был еще один столбец, не выровненный. После добавления «sScrollX»: «100%», "sScrollXInner": "100%" все столбцы были выровнены (с точностью до пикселя).

Решение для Chrome / Chromium, работает в FF, Opera, IE9:

$(document).ready(function()
{
  var oTable = $('#mytable').dataTable(
  {
    "sScrollY":  ( 0.6 * $(window).height() ),
    "bPaginate": false,
    "bJQueryUI": true,
    "bScrollCollapse": true,
    "bAutoWidth": true,
    "sScrollX": "100%",
    "sScrollXInner": "100%"
  });


  setTimeout(function ()
  {
    oTable.fnAdjustColumnSizing();
  }, 10 );

});

Answer 2

Я решил эту проблему, обернув таблицу «dataTable» в div с переполнением: auto

.dataTables_scroll
{
    overflow:auto;
}

и добавил этот JS после инициализации dataTable

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

Не использовать sScrollXили sScrollY, затем удалите и добавьте упаковщик div, который делает то же самое.

Answer 3

У меня была проблема, и это оказалось побочным эффектом моего CSS.Попробуйте отключить все внешние css и посмотрите, сохраняется ли проблема.

Answer 4

var table = $("#myTable").DataTable({
            "sScrollY": "150px",
            //"bAutoWidth": false // Disable the auto width calculation 
        });

    $(window).resize( function () {
        table.columns.adjust();
    } );

Answer 5

if ( $.browser.webkit ) {
    setTimeout( function () {
        oTable.fnAdjustColumnSizing();
    }, 10 );
}

Отлично сработало для меня!

Answer 6

У меня была похожая проблема, но у меня изменились размеры, чтобы они подходили после поиска, сортировки или взаимодействия с таблицей таким образом, чтобы вызвать перерисовку, попробовал функцию перерисовки ..., но в итоге не пришлось импровизировать.Забавное исправление, которое я работал для меня, вызывало oTable.fnFilter( "x",0 ) и oTable.fnFilter( "",0 ) в том же порядке (поиск и четкий поиск) ... это работает ... смеется ..:)

Answer 7

это может помочь вам (не уверен, но я думаю, что стоит попробовать)

добавить этот код на страницу

if ( $.browser.webkit ) {
   setTimeout( function () {
       oTable.fnAdjustColumnSizing();
   }, 10 );
}

взято отсюда проблема ширины столбцов в Chrome & Safari

Кроме того, я думаю, что стоит попытаться определить столбцы в конструкторе, а не определять их в (оставьте тег пустым)

Answer 8

У меня была проблема, когда данные в столбцах были слишком велики, и в них не было места для разрыва строки. Мое решение состояло в том, чтобы добавить div с переполнением и атрибутом title следующим образом:

<td style="width: 110px;max-width:200px;"><div style="overflow:hidden;" title="@item.NewValue" >@item.NewValue</div></td>

Это привело к тому, что стол опустился почти полностью.

Answer 9

У меня тоже была эта проблема.После многих разных попыток я попробовал следующее и преуспел.

Я попытался добавить тег label со свойством float в атрибуте style.Тогда сработало найти.

Например:

<td class="" id='sequenceNumber'><label style="float:left;">SEQ #</label></td>

Answer 10

, если вы используете загрузчик:

.table {
    width: 100%;
    max-width: none; // >= this is very important
}