Материализовать фиксированный заголовок таблицы данных с настраиваемой прокруткой

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

Фиксированный заголовок с полосой прокрутки по умолчанию

HTML-код:

<div id="tblContainer" class="material-table z-depth-3 hoverable">
  <table id="myTable" class="highlight"></table>
</div>

JS-код:

$(document).ready(function(){
 var data2 = {
   "results": [{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1",
"Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}
   ]
 };

 $('#myTable').dataTable({
         data: data2.results,
        "order": [],
        "bSort": false,
        "bInfo": false,
        "paging": false,
        "searching": false,
        columns: [
          { data: 'Name', title: "Name" },
          { data: 'Amount', title: "Amount" },
          { data: 'Profit', title: "Profit" },
          { data: 'Loss', title: "Loss" },
          { data: 'Age', title: "Age" },
          { data: 'Address', title: "Address"},
          { data: 'Loss', title: "Loss" },
          { data: 'Age', title: "Age" },
          { data: 'Address', title: "Address"}
        ],
        "columnDefs": [
           { "width": "200px", "targets": [0] },
           { "width": "100px", "targets": [1] },
           { "width": "100px", "targets": [2] },
           { "width": "100px", "targets": [3,6] },
           { "width": "100px", "targets": [4,7] },
           { "width": "200px", "targets": [5,8] }
        ],
         "fixedHeader": {
           header: true
         }
    });
});

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

Фиксированный заголовок с настраиваемой полосой прокрутки

В приведенном выше коде я изменил свою HTML-часть следующим образом и добавил этот css. Но фиксированный заголовок не работает.

HTML-код:

<div class="row">
  <div class="col s8 m5">
    <div id="tblContainer" class="material-table z-depth-3 hoverable">
    <table id="myTable" class="highlight"></table>
  </div>
  </div>
</div>

Код CSS:

#myTable_wrapper {
  overflow-x:auto;
}

Я прикрепил здесь два примера JSFiddle. Как добиться фиксированного заголовка для пользовательской полосы прокрутки в таблице материализации данных?


javascript jquery css datatables materialize
person web developer    schedule 06.04.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

По-видимому, фиксированный заголовок datatables вообще не поддерживает scoll-x. Я пытался месяц или два назад, но не смог найти решение. Прочтите тему здесь

Тем не менее, мне удалось решить эту проблему, изменив дизайн моей страницы. Я не использовал фиксированный заголовок. Но поместите мою таблицу в верхнюю часть div, что означает отсутствие окна поиска, разбивки на страницы или чего-либо еще поверх таблицы. Как и ваш первый пример JSFiddle.

После этого я дал высоту для прокрутки Y, и мой заголовок стал фиксированным. Я имею в виду;

избавиться от

"fixedHeader": {
           header: true
         }

и поместите эти строки вместо этого.

"ScrollX": true,
"scrollCollapse": true,
"sScrollY": 400

Попробуйте это на JSFiddle

Кроме того, вы можете сделать высоту динамической, например:

"sScrollY": calcDataTableHeight(),

И функция

var calcDataTableHeight = function() {
h = $('#wrapper').height() - 150;
return h;
};

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

person Rüzgar    schedule 09.04.2017