Мобильная версия- FixedHeader
- Группировка строк
- Дочерние строки
- Нижний колонтитул
- Множественный выбор и выбор всех
Все работает отлично. Есть только одна проблема с фиксированными заголовками. При прокрутке вниз и вверх фиксированные заголовки идеально выравниваются. Однако когда вы прокручиваете вверх и достигаете верхней части страницы/представления, фиксированные заголовки смещаются влево и не совпадают со столбцами ниже. (см. столбец «Позиция»)
Вы можете увидеть проблему в этом jsfiddle: https://jsfiddle.net/v5fs3do6/
До (работает )
После (заголовки смещены)
Я потратил часы, пытаясь решите эту проблему с помощью chatgpt, но пример кажется слишком сложным для его решения. Мы попытались откатить некоторые плагины, чтобы посмотреть, где и когда возникла проблема, но это тоже не удалось.
К сожалению, требования требуют наличия всех этих функций и плагинов.
К сожалению, требования требуют наличия всех этих функций и плагинов.
К сожалению, требования требуют наличия всех этих функций и плагинов.
p>
Я надеюсь, что глаза человека-эксперта в дизайне/кодировании интерфейса помогут мне решить эту проблему.
У jsfiddle есть рабочий пример, демонстрирующий всю функциональность и проблему, но вот и код.
Любая помощь будет принята с благодарностью и спасет меня от безумия.
Спасибо! р>
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: black !important;
}
Select Grouping Column:
None
Office
Position
Name
Position
Age
Start date
Salary
Department
Project
Experience (Years)
Location
Office
Hobby
Favorite Animal
Tiger Nixon
System Architect
61
2011/04/25
$320,800
IT
Project A
10
Scotland
Edinburgh
Fishing
Tiger
Garrett Winters
Accountant
63
2011/07/25
$170,750
Finance
Project B
8
Japan
Tokyo
Gardening
Cat
Ashton Cox
Junior Technical Author
66
2009/01/12
$86,000
Documentation
Project C
5
USA
San Francisco
Painting
Dog
Ryan Dixon
System Architect
61
2011/04/25
$320,800
IT
Project D
15
Japan
Tokyo
Fishing
Tiger
Brielle Williamson
Integration Specialist
61
2012/12/02
$372,000
Development
Project E
9
New Zealand
Wellington
Photography
Dolphin
Herrod Chandler
Sales Assistant
59
2012/08/06
$137,500
Sales
Project F
12
UK
London
Hiking
Eagle
Rhona Davidson
Senior Javascript Developer
55
2010/10/14
$327,900
Development
Project G
7
Canada
Toronto
Reading
Panda
Colleen Hurst
Javascript Developer
39
2009/09/15
$205,500
Development
Project H
6
Australia
Sydney
Cooking
Elephant
Sonya Frost
Software Engineer
23
2008/12/13
$103,600
IT
Project 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
