Мобильная версия- FixedHeader
- Группировка строк
- Дочерние строки
- Нижний колонтитул
- Множественный выбор и выбор всех
Все работает отлично. Есть только одна проблема с фиксированными заголовками. При прокрутке вниз и вверх фиксированные заголовки идеально выравниваются. Однако когда вы прокручиваете вверх и достигаете верхней части страницы/представления, фиксированные заголовки смещаются влево и не совпадают со столбцами ниже. (см. столбец «Позиция»)
Вы можете увидеть проблему в этом jsfiddle: https://jsfiddle.net/v5fs3do6/
До (работает )
После (заголовки смещены)
Я потратил часы, пытаясь решите эту проблему с помощью chatgpt, но пример кажется слишком сложным для его решения. Мы попытались откатить некоторые плагины, чтобы посмотреть, где и когда возникла проблема, но это тоже не удалось.
К сожалению, требования требуют наличия всех этих функций и плагинов.
К сожалению, требования требуют наличия всех этих функций и плагинов.
К сожалению, требования требуют наличия всех этих функций и плагинов.
p>
Я надеюсь, что глаза человека-эксперта в дизайне/кодировании интерфейса помогут мне решить эту проблему.
У jsfiddle есть рабочий пример, демонстрирующий всю функциональность и проблему, но вот и код.
Любая помощь будет принята с благодарностью и спасет меня от безумия.
Спасибо! p>
Код: Выделить всё
DataTable with Grouping, Expanded Child Rows
table.dataTable thead th {
background-color: #f4f4f4;
}
.group-header {
font-weight: bold;
background-color: #d8d8d8;
}
.child-row td {
padding: 10px 0;
border-top: none;
text-align: left;
}
.blueTable th {
background-color: #007bff !important;
color: white !important;
}
.groupRow {
background-color: #0056b3 !important;
color: white !important;
}
.childDataRow {
background-color: #80c1ff !important;
color: black !important;
}
.groupFooterRow {
background-color: #cce5ff !important;
font-weight: bold;
color: b l a c k ! i m p o r t a n t ; < b r / > } < b r / > & l t ; / s t y l e & g t ; < b r / > & l t ; / h e a d & g t ; < b r / > < b r / > & l t ; b o d y & g t ; < b r / > < b r / > & l t ; h 3 & g t ; S e l e c t G r o u p i n g C o l u m n : & l t ; / h 3 & g t ; < b r / > & l t ; s e l e c t i d = " g r o u p - b y - c o l u m n " & g t ; < b r / > & l t ; o p t i o n v a l u e = " n o n e " & g t ; N o n e & l t ; / o p t i o n & g t ; < b r / > & l t ; o p t i o n v a l u e = " o f f i c e " & g t ; O f f i c e & l t ; / o p t i o n & g t ; < b r / > & l t ; o p t i o n v a l u e = " p o s i t i o n " & g t ; P o s i t i o n & l t ; / o p t i o n & g t ; < b r / > & l t ; / s e l e c t & g t ; < b r / > < b r / > & l t ; t a b l e i d = " e x a m p l e " c l a s s = " d i s p l a y n o w r a p t a b l e r e s p o n s i v e - t a b l e t a b l e - v c e n t e r t a b l e - h o v e r " s t y l e = " w i d t h : 1 0 0 % " & g t ; < b r / > & l t ; t h e a d c l a s s = " t e x t - w h i t e " & g t ; < b r / > & l t ; t r c l a s s = " b g - p r i m a r y " & g t ; < b r / > & l t ; t h & g t ; & l t ; i n p u t t y p e = " c h e c k b o x " i d = " s e l e c t - a l l " & g t ; & l t ; / t h & g t ; < b r / > & l t ; t h & g t ; N a m e & l t ; / t h & g t ; < b r / > & l t ; t h & g t ; P o s i t i o n & l t ; / t h & g t ; < b r / > & l t ; t h & g t ; A g e & l t ; / t h & g t ; < b r / > & l t ; t h & g t ; S t a r t d a t e & l t ; / t h & g t ; < b r / > & l t ; t h & g t ; S a l a r y & l t ; / t h & g t ; < b r / > & l t ; t h & g t ; D e p a r t m e n t & l t ; / t h & g t ; < b r / > & l t ; t h & g t ; P r o j e c t & l t ; / t h & g t ; < b r / > & l t ; t h & g t ; E x p e r i e n c e ( Y e a r s ) & l t ; / t h & g t ; < b r / > & l t ; t h & g t ; L o c a t i o n & l t ; / t h & g t ; < b r / > & l t ; t h c l a s s = " d - n o n e " & g t ; O f f i c e & l t ; / t h & g t ; < b r / > & l t ; t h c l a s s = " d - n o n e " & g t ; H o b b y & l t ; / t h & g t ; < b r / > & l t ; t h c l a s s = " d - n o n e " & g t ; F a v o r i t e A n i m a l & l t ; / t h & g t ; < b r / > & l t ; / t r & g t ; < b r / > & l t ; / t h e a d & g t ; < b r / > & l t ; t b o d y & g t ; < b r / > & l t ; t r c l a s s = " m a i n R e c o r d R o w t a b l e - l i g h t " & g t ; < b r / > & l t ; t d & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = " c u s t o m - c e l l - c l a s s " & g t ; < b r / > T i g e r N i x o n < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " h o b b y " v a l u e = " F i s h i n g " & g t ; < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " f a v o r i t e - a n i m a l " v a l u e = " T i g e r " & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; S y s t e m A r c h i t e c t & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 6 1 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 2 0 1 1 / 0 4 / 2 5 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; $ 3 2 0 , 8 0 0 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; I T & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; P r o j e c t A & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 1 0 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; S c o t l a n d & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; E d i n b u r g h & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; F i s h i n g & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; T i g e r & l t ; / t d & g t ; < b r / > & l t ; / t r & g t ; < b r / > & l t ; t r c l a s s = " m a i n R e c o r d R o w t a b l e - l i g h t " & g t ; < b r / > & l t ; t d & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = " c u s t o m - c e l l - c l a s s " & g t ; < b r / > G a r r e t t W i n t e r s < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " h o b b y " v a l u e = " G a r d e n i n g " & g t ; < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " f a v o r i t e - a n i m a l " v a l u e = " C a t " & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; A c c o u n t a n t & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 6 3 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 2 0 1 1 / 0 7 / 2 5 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; $ 1 7 0 , 7 5 0 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; F i n a n c e & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; P r o j e c t B & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 8 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; J a p a n & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; T o k y o & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; G a r d e n i n g & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; C a t & l t ; / t d & g t ; < b r / > & l t ; / t r & g t ; < b r / > & l t ; t r c l a s s = " m a i n R e c o r d R o w t a b l e - l i g h t " & g t ; < b r / > & l t ; t d & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = " c u s t o m - c e l l - c l a s s " & g t ; < b r / > A s h t o n C o x < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " h o b b y " v a l u e = " P a i n t i n g " & g t ; < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " f a v o r i t e - a n i m a l " v a l u e = " D o g " & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; J u n i o r T e c h n i c a l A u t h o r & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 6 6 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 2 0 0 9 / 0 1 / 1 2 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; $ 8 6 , 0 0 0 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; D o c u m e n t a t i o n & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; P r o j e c t C & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 5 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; U S A & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; S a n F r a n c i s c o & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; P a i n t i n g & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; D o g & l t ; / t d & g t ; < b r / > & l t ; / t r & g t ; < b r / > & l t ; t r c l a s s = " m a i n R e c o r d R o w t a b l e - l i g h t " & g t ; < b r / > & l t ; t d & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = " c u s t o m - c e l l - c l a s s " & g t ; < b r / > R y a n D i x o n < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " h o b b y " v a l u e = " F i s h i n g " & g t ; < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " f a v o r i t e - a n i m a l " v a l u e = " T i g e r " & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; S y s t e m A r c h i t e c t & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 6 1 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 2 0 1 1 / 0 4 / 2 5 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; $ 3 2 0 , 8 0 0 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; I T & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; P r o j e c t D & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 1 5 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; J a p a n & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; T o k y o & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; F i s h i n g & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; T i g e r & l t ; / t d & g t ; < b r / > & l t ; / t r & g t ; < b r / > & l t ; t r c l a s s = " m a i n R e c o r d R o w t a b l e - l i g h t " & g t ; < b r / > & l t ; t d & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = " c u s t o m - c e l l - c l a s s " & g t ; < b r / > B r i e l l e W i l l i a m s o n < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " h o b b y " v a l u e = " P h o t o g r a p h y " & g t ; < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " f a v o r i t e - a n i m a l " v a l u e = " D o l p h i n " & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; I n t e g r a t i o n S p e c i a l i s t & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 6 1 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 2 0 1 2 / 1 2 / 0 2 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; $ 3 7 2 , 0 0 0 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; D e v e l o p m e n t & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; P r o j e c t E & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 9 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; N e w Z e a l a n d & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; W e l l i n g t o n & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; P h o t o g r a p h y & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; D o l p h i n & l t ; / t d & g t ; < b r / > & l t ; / t r & g t ; < b r / > & l t ; t r c l a s s = " m a i n R e c o r d R o w t a b l e - l i g h t " & g t ; < b r / > & l t ; t d & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = " c u s t o m - c e l l - c l a s s " & g t ; < b r / > H e r r o d C h a n d l e r < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " h o b b y " v a l u e = " H i k i n g " & g t ; < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " f a v o r i t e - a n i m a l " v a l u e = " E a g l e " & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; S a l e s A s s i s t a n t & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 5 9 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 2 0 1 2 / 0 8 / 0 6 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; $ 1 3 7 , 5 0 0 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; S a l e s & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; P r o j e c t F & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 1 2 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; U K & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; L o n d o n & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; H i k i n g & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; E a g l e & l t ; / t d & g t ; < b r / > & l t ; / t r & g t ; < b r / > & l t ; t r c l a s s = " m a i n R e c o r d R o w t a b l e - l i g h t " & g t ; < b r / > & l t ; t d & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = " c u s t o m - c e l l - c l a s s " & g t ; < b r / > R h o n a D a v i d s o n < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " h o b b y " v a l u e = " R e a d i n g " & g t ; < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " f a v o r i t e - a n i m a l " v a l u e = " P a n d a " & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; S e n i o r J a v a s c r i p t D e v e l o p e r & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 5 5 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 2 0 1 0 / 1 0 / 1 4 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; $ 3 2 7 , 9 0 0 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; D e v e l o p m e n t & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; P r o j e c t G & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 7 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; C a n a d a & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; T o r o n t o & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; R e a d i n g & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; P a n d a & l t ; / t d & g t ; < b r / > & l t ; / t r & g t ; < b r / > & l t ; t r c l a s s = " m a i n R e c o r d R o w t a b l e - l i g h t " & g t ; < b r / > & l t ; t d & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = " c u s t o m - c e l l - c l a s s " & g t ; < b r / > C o l l e e n H u r s t < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " h o b b y " v a l u e = " C o o k i n g " & g t ; < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " f a v o r i t e - a n i m a l " v a l u e = " E l e p h a n t " & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; J a v a s c r i p t D e v e l o p e r & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 3 9 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 2 0 0 9 / 0 9 / 1 5 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; $ 2 0 5 , 5 0 0 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; D e v e l o p m e n t & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; P r o j e c t H & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 6 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; A u s t r a l i a & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; S y d n e y & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; C o o k i n g & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; E l e p h a n t & l t ; / t d & g t ; < b r / > & l t ; / t r & g t ; < b r / > & l t ; t r c l a s s = " m a i n R e c o r d R o w t a b l e - l i g h t " & g t ; < b r / > & l t ; t d & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = " c u s t o m - c e l l - c l a s s " & g t ; < b r / > S o n y a F r o s t < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " h o b b y " v a l u e = " K n i t t i n g " & g t ; < b r / > & l t ; i n p u t t y p e = " h i d d e n " c l a s s = " f a v o r i t e - a n i m a l " v a l u e = " F o x " & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; S o f t w a r e E n g i n e e r & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 2 3 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 2 0 0 8 / 1 2 / 1 3 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; $ 1 0 3 , 6 0 0 & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; I T & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; P r oject I
4
USA
San Diego
Knitting
Fox
Jena Gaines
Office Manager
30
2008/12/19
$90,560
Administration
Project J
2
USA
New York
Traveling
Whale
Quinn Flynn
Support Lead
22
2013/03/03
$342,000
Support
Project K
1
Canada
Vancouver
Swimming
Shark
Charde Marshall
Regional Director
36
2008/10/16
$470,600
Management
Project L
11
Singapore
Singapore
Writing
Wolf
Haley Kennedy
Senior Marketing Designer
43
2012/12/18
$313,500
Marketing
Project M
8
UK
Manchester
Cycling
Bear
Tatyana Fitzpatrick
Regional Director
19
2010/03/17
$385,750
Management
Project N
3
India
Mumbai
Dancing
Peacock
$(document).ready(function() {
var groupColumn = 10;
var initialColumnWidths = [];
function storeOriginalClasses() {
$('#example tbody tr').each(function() {
$(this).data('original-classes', $(this).attr('class'));
$(this).find('td').each(function() {
$(this).data('original-classes', $(this).attr('class'));
});
});
}
function reapplyOriginalClasses() {
$('#example tbody tr').each(function() {
var originalClasses = $(this).data('original-classes');
if (originalClasses) {
$(this).attr('class', originalClasses);
}
$(this).find('td').each(function() {
var originalTdClasses = $(this).data('original-classes');
if (originalTdClasses) {
$(this).attr('class', originalTdClasses);
}
});
});
$('.groupRow').each(function() {
var originalClasses = $(this).data('original-classes');
if (originalClasses) {
$(this).attr('class', originalClasses);
}
});
}
function addChildRows() {
$('.child-row').remove();
var colspan = $('#example thead tr th:visible').length - 1;
table.rows().every(function(rowIdx, tableLoop, rowLoop) {
var tr = $(this.node());
var hobby = tr.find('.hobby').val();
var favoriteAnimal = tr.find('.favorite-animal').val();
var childRowHtml = `
Hobby: ${hobby} | Favorite Animal: ${favoriteAnimal}
`;
tr.after(childRowHtml);
});
}
function addGroupFooter() {
$('.groupFooterRow').remove();
var groupData = {};
table.rows({
page: 'current'
}).every(function() {
var data = this.data();
var groupKey = data[groupColumn];
if (!groupData[groupKey]) {
groupData[groupKey] = {
totalSalary: 0,
totalYears: 0,
rows: []
};
}
groupData[groupKey].rows.push(this.node());
groupData[groupKey].totalSalary += parseFloat(data[5].toString().replace(/[\$,]/g, ''));
groupData[groupKey].totalYears += parseFloat(data[8]) || 0;
});
$.each(groupData, function(groupKey, groupInfo) {
var lastRow = $(groupInfo.rows[groupInfo.rows.length - 1]);
var lastChildRow = lastRow.next('.childDataRow').length ? lastRow.next('.childDataRow') : lastRow;
var totalVisibleColumns = $('#example thead tr th:visible').length;
var colspanBeforeSalary = 5;
var colspanBetween = 2;
var colspanAfterYears = totalVisibleColumns - 9;
var formattedSalary = groupInfo.totalSalary.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
var formattedYears = groupInfo.totalYears.toFixed(2);
var groupFooterHtml = `
Group Total Salary: $${formattedSalary}
Group Total Years: ${formattedYears}
`;
lastChildRow.after(groupFooterHtml);
});
}
// Capture initial column widths when the table is first drawn
function captureInitialColumnWidths() {
initialColumnWidths = [];
$('#example thead th').each(function() {
initialColumnWidths.push($(this).width());
});
}
// Apply the captured column widths
function applyColumnWidths() {
$('#example thead th').each(function(index) {
$(this).css('width', initialColumnWidths[index] + 'px');
});
$('#example tbody tr:first td').each(function(index) {
$(this).css('width', initialColumnWidths[index] + 'px');
});
}
storeOriginalClasses();
var table = $('#example').DataTable({
responsive: false,
fixedHeader: true,
scrollX: true,
order: [
[1, 'asc']
],
lengthChange: true,
lengthMenu: [10, 25, 50, 100],
paging: true,
rowGroup: {
dataSrc: groupColumn,
startRender: function(rows, group) {
var colspan = $('#example thead tr th:visible').length;
return $('')
.addClass('groupRow bg-primary-light text-white')
.append(`Group: ${group}`);
}
},
columnDefs: [{
targets: 0,
orderable: false,
searchable: false,
className: 'select-checkbox',
render: function() {
return '';
}
},
{
targets: [10, 11, 12],
visible: false,
searchable: true
},
{
targets: 2, // The "Position" column
width: '100px', // Set width to 100px
createdCell: function(td, cellData, rowData, row, col) {
$(td).css('white-space', 'normal'); // Enable word wrapping
$(td).css('word-wrap', 'break-word'); // Ensure long words break
}
}
],
autoWidth: false
});
// Add child rows and group footers initially
addChildRows();
addGroupFooter();
// Capture initial column widths after the table is drawn
table.on('draw', function() {
if (initialColumnWidths.length === 0) {
captureInitialColumnWidths();
}
addChildRows();
addGroupFooter();
reapplyOriginalClasses();
adjustTable();
});
// Apply fixed column widths during scrolling to avoid shifting
$('#example_wrapper .dataTables_scrollBody').on('scroll', function() {
applyColumnWidths();
});
// Adjust on column order change
table.on('order', function() {
adjustTable();
});
// Handle Select All checkbox
$('#select-all').on('click', function() {
var rows = table.rows({
'search': 'applied'
}).nodes();
$('input[type="checkbox"]', rows).prop('checked', this.checked);
});
// Handle grouping change based on dropdown
$('#group-by-column').on('change', function() {
var selectedColumn = $(this).val();
if (selectedColumn === "none") {
groupColumn = null;
} else if (selectedColumn === "position") {
groupColumn = 2;
} else if (selectedColumn === "office") {
groupColumn = 10;
}
table.rowGroup().dataSrc(groupColumn).draw();
adjustTable();
});
// Function to adjust columns and fixed header alignment
function adjustTable() {
table.columns.adjust();
if (table.fixedHeader) {
table.fixedHeader.adjust();
}
}
// Fix header alignment on window resize
$(window).on('resize', function() {
adjustTable();
});
// Recalculate column width on table draw events, like search or paging
table.on('responsive-resize', function() {
adjustTable();
});
// Call the adjustment function on initial load to ensure correct alignment
adjustTable();
});
Подробнее здесь: https://stackoverflow.com/questions/790 ... -on-scroll
