Подтвердить что ты не робот

Фиксированные заголовки DataTables смещены с колонками в широких таблицах

проблема

При использовании sScrollX, sScrollXInner и/или sScrollY для получения таблицы фиксированных заголовков с прокруткой внутреннего содержимого заголовки таблицы выходят из выравнивания с остальной частью тела в Chrome и IE. Firefox, с другой стороны, отображает их отлично.

При использовании версии 1.9.4, насколько я могу судить, эта проблема возникает только тогда, когда имеется много данных с изменяющейся шириной и со словами, которые очень длинные/распаковываются и объединяются в те же столбцы, что и маленькие. Кроме того, рассматриваемая таблица должна быть достаточно широкой.

Все эти факторы демонстрируются в этой скрипке:

Выход

Хром:
Chrome Screenshot

IE:
IE9 Screenshot

Fire Fox
Firefox Screenshot

Предлагаемые решения

Эти решения были предложены ранее, но не оказали влияния на мою реализацию. Вследствие некоторых из этих предложений я настроил чистую простую демонстрацию ванили, так как я хотел убедиться, что никакой другой код не способствовал этому эффекту.

  • отключить/удалить все мои css
  • setTimeout( function() { oTable.fnAdjustColumnSizing(); }, 10 );
  • вызов oTable.fnFilter( "x",0 ) и oTable.fnFilter( "",0 ) в этом порядке
  • "sScrollXInner": "100%"
  • избавиться от любой ширины

Единственное решение, которое я нашел для sScrollX заголовков, - это sScrollX и sScrollY, но это не может считаться решением, поскольку вы теряете фиксированную функцию прокрутки заголовка/внутреннего содержимого. Так что, к сожалению, это временный взлом, а не исправление!

Заметка

Для редактирования/игры с последней скрипкой.

Я пробовал различные комбинации, которые можно наблюдать в истории изменений скрипки, используя ссылку http://jsfiddle.net/pratik136/etL73/#REV# где 1 <= #REV# <= 12

история

StackO
Этот вопрос был задан ранее: заголовок jQuery Datatables смещен с вертикальной прокруткой
но существенное отличие состоит в том, что ОП этого вопроса упомянул, что они смогли решить проблему, если был удален весь CSS, что не соответствует действительности в моем случае, и я попробовал несколько перестановок, таким образом считая вопрос достойным репоста.

внешний
Эта проблема также была помечена на форуме DataTables:

Эта проблема свела меня с ума! Пожалуйста, поделитесь своими мыслями!

4b9b3361

ОТВЕТЫ

Ответ 1

РЕДАКТИРОВАТЬ: см. Последнюю скрипку с "фиксированным заголовком":

Скрипка

Одно из решений заключается в том, чтобы реализовать прокрутку самостоятельно, а не позволить плагину DataTables сделать это за вас.

Я взял ваш пример и прокомментировал опцию sScrollX. Когда эта опция отсутствует, плагин DataTables просто поместит вашу таблицу как есть в контейнер div. Эта таблица будет вытянута за пределы экрана, поэтому, чтобы исправить это, мы можем поместить ее в div с требуемой шириной и набором свойств переполнения - это именно то, что делает последний оператор jQuery - она упаковывает существующую таблицу в div шириной 300px. Вам, вероятно, вообще не нужно будет устанавливать ширину в div обтекания (в нашем примере 300px), у меня она есть здесь, чтобы эффект обрезки был легко виден. И будьте добры, не забудьте заменить этот встроенный стиль классом.

$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
    "iDisplayLength": -1,
    "bPaginate": true,
    "iCookieDuration": 60,
    "bStateSave": false,
    "bAutoWidth": false,
    //true
    "bScrollAutoCss": true,
    "bProcessing": true,
    "bRetrieve": true,
    "bJQueryUI": true,
    //"sDom": 't',
    "sDom": '<"H"CTrf>t<"F"lip>',
    "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
    //"sScrollY": "500px",
    //"sScrollX": "100%",
    "sScrollXInner": "110%",
    "fnInitComplete": function() {
        this.css("visibility", "visible");
    }
});

var tableId = 'PeopleIndexTable';
$('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())});

Ответ 2

Ниже приведен способ получения фиксированной таблицы заголовков, я не знаю, будет ли это достаточно для вашей цели. Изменения:

  • используйте "bScrollCollapse" вместо "sScrollXInner"
  • не использовать набор полей для упаковки таблицы
  • добавить класс "div.box" css

Кажется, что он полностью работает на моей локальной машине, но не работает полностью с помощью Fiddle. Кажется, что Fiddle добавляет файл css (normalize.css), который каким-то образом сломал плагин css (совершенно уверен, что я могу полностью работать и в Fiddle, добавляющем некоторые правила четкости CSS, но не успев расследовать сейчас)

Ниже приведен фрагмент рабочего кода. Надеюсь, это поможет.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
  <script type='text/javascript' src="http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>

 <style type='text/css'>
       div.box {
       height: 100px;
       padding: 10px;
       overflow: auto;
       border: 1px solid #8080FF;
       background-color: #E5E5FF;
   }

  .standard-grid1, .standard-grid1 td, .standard-grid1 th {
    border: solid black thin;
   }
</style>

<script type='text/javascript'> 
$(window).load(function(){
$(document).ready(function() {
    var stdTable1 = $(".standard-grid1").dataTable({
        "iDisplayLength": -1,
        "bPaginate": true,
        "iCookieDuration": 60,
        "bStateSave": false,
        "bAutoWidth": false,
        //true
        "bScrollAutoCss": true,
        "bProcessing": true,
        "bRetrieve": true,
        "bJQueryUI": true,
        "sDom": '<"H"CTrf>t<"F"lip>',
        "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
        "sScrollX": "100%",
        //"sScrollXInner": "110%",
        "bScrollCollapse": true,
        "fnInitComplete": function() {
            this.css("visibility", "visible");
        }
    });
});
});

</script>


</head>
<body>
<div>
    <table class="standard-grid1 full-width content-scrollable" id="PeopleIndexTable">
        <thead>
          <!-- put your table header HTML here -->
       </thead>
       <tbody>
          <!-- put your table body HTML here -->
        </tbody>
    </table>
</div>
</body>
</html>

Ответ 3

У меня такая же проблема на IE9.

Я просто использую RegExp, чтобы удалить все белые пробелы, прежде чем писать HTML на страницу.

var Tables=$('##table_ID').html();
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
Tables= Tables.replace(expr, '><');
$('##table_ID').html(Tables);
oTable = $('##table_ID').dataTable( {
  "bPaginate": false,
  "bLengthChange": false,
  "bFilter": false,
  "bSort": true,
  "bInfo": true,
  "bAutoWidth": false,
  "sScrollY": ($(window).height() - 320),
  "sScrollX": "100%",
  "iDisplayLength":-1,
  "sDom": 'rt<"bottom"i flp>'
} );

Ответ 4

Добавление этих двух строк устраняет эту проблему для меня

"responsive": true,
"bAutoWidth": true

Теперь доступен доступный плагин: https://datatables.net/extensions/responsive/. Однако, по моему опыту, я обнаружил, что все еще есть несколько ошибок. Это все еще лучшее решение, которое я нашел до сих пор.

Ответ 5

Приведенный ниже код. Исправлена ​​проблема с IE 9.0 по крайней мере. Надеюсь, что это поможет

var oTable =  $('#tblList').dataTable({
    "sScrollY": "320px",
    "bScrollCollapse": true,
    });

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

Ответ 6

Функция поиска триггера DataTable после инициализации DataTable с пустой строкой в ​​ней. Он автоматически отрегулирует несоосность thead с помощью tbody.

$( document ).ready(function()
{

    $('#monitor_data_voyage').DataTable( {
        scrollY:150,
        bSort:false,
        bPaginate:false,
        sScrollX: "100%",
        scrollX: true,
    } );

    setTimeout( function(){
       $('#monitor_data_voyage').DataTable().search( '' ).draw();
    }, 10 );

});

Ответ 7

Для пользователей начальной загрузки это исправлено для меня:

   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
      .fixedColumns().relayout();

См. статью здесь

Ответ 8

У меня была такая же проблема, и этот код ее решает. Я получил это решение из этой статьи, но мне пришлось корректировать время на интервале, чтобы он работал.

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

Ответ 9

попробуйте это, следующий код решил мою проблему

table.dataTable tbody th,table.dataTable tbody td 
{
     white-space: nowrap;
}

для получения дополнительной информации см. здесь.

Ответ 10

Добавьте table-layout: fixed в свой стиль таблицы (атрибут css или style).

Браузер перестанет применять свой собственный алгоритм для решения ограничений размера.

Поиск в Интернете информации об обработке ширины столбцов в фиксированном расположении таблицы (вот два простых вопроса SO: здесь и здесь)

Очевидно: недостатком будет то, что ширина ваших столбцов не будет адаптироваться к их контенту.

[Edit] Мой ответ работал, когда я использовал плагин FixedHeader, но сообщение на datatable форуме, похоже, указывает на то, что при использовании опции sScrollX возникают другие проблемы:

bAutoWidth и sWidth игнорируются при установке sScrollX (v1.7.5)

Я попытаюсь найти способ обойти это.

Ответ 11

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

Существует строка, которая может быть изменена в файле dataTables.fixedHeader.js. макет по умолчанию функции выглядит следующим образом.

    _matchWidths: function (from, to) {
        var get = function (name) {
            return $(name, from)
                .map(function () {
                    return $(this).width();
                }).toArray();
        };

        var set = function (name, toWidths) {
            $(name, to).each(function (i) {
                $(this).css({
                    width: toWidths[i],
                    minWidth: toWidths[i]
                });
            });
        };

        var thWidths = get('th');
        var tdWidths = get('td');

        set('th', thWidths);
        set('td', tdWidths);
    },

измените

    return $(this).width();

to

    return $(this).outerWidth();

externalWidth() - это функция, которая содержится в jquery.dimensions.js, если вы используете g более новую версию jquery. то есть. JQuery-3.1.1.js

что делает вышеуказанная функция, она отображает th исходной таблицы, затем применяет их к "клонированной" таблице (фиксированный заголовок). в моем случае они были всегда отключены примерно на 5 пикселей до 8 пикселей при несогласованности. Скорее всего, это не самое лучшее исправление, но обеспечивает решение для всех других таблиц в решении без необходимости указывать его в декларации таблицы. Он был протестирован только в Chrome до сих пор, но он должен обеспечить решение для всех браузеров.

Ответ 12

Если вы хотите использовать scrollY, используйте:

$( 'DataTables_sort_wrapper') триггер ("click").

Ответ 13

Я исправил ту же проблему в своем приложении, добавив ниже код в css -

.dataTables_scrollHeadInner
{
     width: 640px !important;
}

Ответ 14

Я исправил ошибку столбца, используя ниже концепцию

$(".panel-title a").click(function(){
    setTimeout( function(){
           $('#tblSValidationFilerGrid').DataTable().search( '' ).draw();
        }, 10 );
})

Ответ 15

Я использую это для автоматического скрытия столбца в соответствии с данными столбца, в этом случае иногда его структурой таблицы разбиения. я решаю эту проблему с помощью этого $ ($. fn.dataTable.tables(true)). DataTable(). columns.adjust(); и эта функция $ ('# datatableId'). on ('draw.dt', function() {}); вызов после загрузки табличных данных.

$('#datatableId').on('draw.dt', function () {
    $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
})

Ответ 16

Попробовав все, что мог, я просто добавил "autoWidth": true и это сработало для меня.

Ответ 17

Столкнувшись с той же проблемой в последнее время и все еще искал решение, когда я что-то пробовал на своем css, проверьте, добавлено ли в ваши ячейки (th и td)

-webkit-box-sizing: content-box; 
-moz-box-sizing: content-box;  
-sizing: content-box;

решит эту проблему; для меня я использовал некоторую фреймворк html/css, добавляющий значение border-box в каждый элемент.

Ответ 18

Вместо использования sScrollX, sScrollY использует отдельный стиль div

.scrollStyle
 {
  height:200px;overflow-x:auto;overflow-y:scroll;
 }

Добавьте ниже после вызова данных в script

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

Его работает отлично после многих попыток.

Ответ 19

У меня была такая же проблема, и я видел много сложных ответов, которые никогда не работали. Я разрешил это, просто переопределив CSS (site.css) следующим образом и исправил его в Chrome, IE и Firefox:

table.display td {
padding: 0px 5px;
}
/* this is needed for IE and Firefox if using horizontal scroll*/
table{
    max-width: none;
    min-height: 0%;
}

Это переопределяет CSS в datatable.jui.css

Ответ 20

Я только что понял способ исправить проблему выравнивания. Изменение ширины div, содержащего статический заголовок, будет фиксировать его выравнивание. Оптимальная ширина, которую я нашел, составляет 98%. См. Код.

Автогенератор div:

<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">

Ширина здесь 100%, измените ее на 98% при инициализации и перезагрузке таблицы данных.

jQuery('#dashboard').dataTable({
    "sEcho": "1",

    "aaSorting": [[aasortvalue, 'desc']],
    "bServerSide": true,
    "sAjaxSource": "NF.do?method=loadData&Table=dashboardReport",
    "bProcessing": true,
    "sPaginationType": "full_numbers",
    "sDom": "lrtip", // Add 'f' to add back in filtering
    "bJQueryUI": false,
    "sScrollX": "100%",
    "sScrollY": "450px",
    "iDisplayLength": '<%=recordCount%>',
    "bScrollCollapse": true,
    "bScrollAutoCss": true,
    "fnInitComplete": function () {
        jQuery('.dataTables_scrollHead').css('width', '98%'); //changing the width
    },
    "fnDrawCallback": function () {
        jQuery('.dataTables_scrollHead').css('width', '98%');//changing the width
    }
});

Ответ 21

попробуйте это

это работает для меня... я добавил css для своего решения, и он работает... хотя я ничего не менял в datatable css, кроме {border-collapse: separate;}

.dataTables_scrollHeadInner {    /*for positioning header when scrolling is applied*/
padding:0% ! important
}