Datatable с фиксированным заголовком, горизонтальной и вертикальной прокруткой

Я ищу html-структуру таблицы данных с фиксированным заголовком, горизонтальной и вертикальной прокруткой. Я работаю над уже разработанным виджетом с данными. Я нашел этот пример https://datatables.net/examples/basic_init/scroll_xy.html где структура html похожа на то, что у меня есть в моем виджете. Я хочу спросить в приведенном выше примере, как прокручивается заголовок, даже если прокрутка находится в теле таблицы. Если это делается с помощью JavaScript, все равно ни одно из свойств заголовка css не изменяется, когда мы прокручиваем его по горизонтали.


datatable css vertical-scrolling horizontal-scrolling fixed-header-tables
person Ranoy    schedule 04.05.2016    source источник
comment
Fiddle работает, как я и ожидал, только прокрутка тела, а не заголовок. jsfiddle.net/jqv1bmj8   -  person Ranoy    schedule 04.05.2016
comment
Что мешает вам исследовать это самостоятельно? Таблица может быть разделена на три разных таблицы: одна для заголовка, одна для основного текста, одна для нижнего колонтитула.   -  person davidkonrad    schedule 04.05.2016
comment
Да, это действительно так, я пытался, но не смог найти. Может быть, это что-то очень простое, чего мне не хватает. Прокрутка есть только на части тела, но вместе с ней прокручивается и заголовок.   -  person Ranoy    schedule 04.05.2016
comment
Честно говоря, я не совсем понимаю вашу проблему, извините за это, но если вам интересно, что происходит, то dataTables скрывает исходную таблицу и вместо этого вводит новые в разные оболочки ‹div›.   -  person davidkonrad    schedule 04.05.2016
comment
Привет, Дэвид, извините за неясность и спасибо за ответ. Единственная часть, которая меня интересует, - это их реализация горизонтальных полос прокрутки с фиксированным заголовком. Как вы сказали, тело и заголовок заключены в свой собственный ‹div›. Если вы посмотрите на окончательный html в ссылке с данными, которую я предоставил, горизонтальная полоса прокрутки находится только в обертке тела. Поэтому, когда мы прокручиваем, только часть тела таблицы должна двигаться, но также перемещается заголовок, чего не должно быть, поскольку это другая родственная оболочка ‹div›. Мы можем сделать это, изменив scrollLeft заголовка, но я не вижу, чтобы это происходило в оболочке заголовка css.   -  person Ranoy    schedule 05.05.2016

Ответы (2)


arrow_upward
0
arrow_downward

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

person tmndungu    schedule 08.08.2018

arrow_upward
0
arrow_downward

Добавьте этот скрипт для вызова идентификатора вашей таблицы

$(document).ready(function () {
$('#tableid').DataTable({
"scrollX": true,
"scrollY": 300,
"paging": false,
});
$('.dataTables_length').addClass('bs-select');
});

для получения дополнительной информации: https://mdbootstrap.com/docs/jquery/tables/scroll/< /а>

person Jamess    schedule 08.07.2020