Как сделать *бесконечный скролл* в таблице при динамичной высоте?
Имею большое кол-во данных, идея в том чтобы предоставлять данные пользователю в табличном варианте, где посредством скролла идёт подгрузка дальнейших данных.
Но если человек зайдёт со смартфона, то изначальная высота таблицы меняется и скрипт перестаёт работать.
Каким образом можно это исправить ?
<div class="card tableWrapper col-12 mt-5 p-3"> <div class="table-responsive"> <table class="mainTable table table-bordered text-center "> <thead> <tr> <th class="rounded-start" >Котельная</th> <th>Наименование</th> <th>Адрес</th> <th class="rounded-end" >Действие</th> </tr> </thead> <tbody id="tableContent" > <td colspan="100%" >Выберите параметры для отображения данных</td> </tbody> </table> </div> </div> |
<div class="card tableWrapper col-12 mt-5 p-3"> <div class="table-responsive"> <table class="mainTable table table-bordered text-center "> <thead> <tr> <th class="rounded-start" >Котельная</th> <th>Наименование</th> <th>Адрес</th> <th class="rounded-end" >Действие</th> </tr> </thead> <tbody id="tableContent" > <td colspan="100%" >Выберите параметры для отображения данных</td> </tbody> </table> </div> </div>
.tableWrapper { max-height: 500px; .table-responsive { max-height: 450px; width: 100%; overflow: auto; display: inline-block; thead { position: sticky; top: -1px; background: $tableBG; border: 2px solid $tableBG; } } } |
.tableWrapper { max-height: 500px; .table-responsive { max-height: 450px; width: 100%; overflow: auto; display: inline-block; thead { position: sticky; top: -1px; background: $tableBG; border: 2px solid $tableBG; } } }
let tableData = document.getElementsByClassName('table-responsive')[0]; function autoScrollData(){ if (tableData.scrollHeight - tableData.scrollTop == tableData.offsetHeight) { console.log(`${tableData.scrollHeight} - ${tableData.scrollTop} == ${tableData.offsetHeight}`); let district = formFilter.getAttribute('data-district'); let boiler = formFilter.getAttribute('data-boiler'); let object = formFilter.getAttribute('data-object'); let promise = fetch('/db/action.php?district='+district+'&boiler='+boiler+'&object='+object+'&limit='+limit); promise.then((response)=>{ return response.text() }).then((result)=>{ if (result === 'empty') { tableContent.insertAdjacentHTML('beforeend','<tr><td colspan="100%" >Данные по выбранным параметрам отсутствуют</td></tr>'); tableData.removeEventListener('scroll',autoScrollData); } else { tableContent.insertAdjacentHTML('beforeend',result); limit += 10; } }) } } tableData && tableData.addEventListener('scroll',autoScrollData); |
let tableData = document.getElementsByClassName('table-responsive')[0]; function autoScrollData(){ if (tableData.scrollHeight - tableData.scrollTop == tableData.offsetHeight) { console.log(`${tableData.scrollHeight} - ${tableData.scrollTop} == ${tableData.offsetHeight}`); let district = formFilter.getAttribute('data-district'); let boiler = formFilter.getAttribute('data-boiler'); let object = formFilter.getAttribute('data-object'); let promise = fetch('/db/action.php?district='+district+'&boiler='+boiler+'&object='+object+'&limit='+limit); promise.then((response)=>{ return response.text() }).then((result)=>{ if (result === 'empty') { tableContent.insertAdjacentHTML('beforeend','<tr><td colspan="100%" >Данные по выбранным параметрам отсутствуют</td></tr>'); tableData.removeEventListener('scroll',autoScrollData); } else { tableContent.insertAdjacentHTML('beforeend',result); limit += 10; } }) } } tableData && tableData.addEventListener('scroll',autoScrollData);
Дополнительно:
Ответы:
То, что вам нужно, называется виртуальным скроллом
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания бесконечного скролла в таблице с динамической высотой, вам потребуется использовать JavaScript и CSS. Ниже приведен пример реализации бесконечного скролла для таблицы с помощью jQuery:
1. HTML:
```html
```
2. CSS:
```html
#table-container {
height: 300px; /* Установите желаемую высоту контейнера таблицы */
overflow-y: scroll;
}
#data-table {
width: 100%;
table-layout: fixed;
}
#data-table tbody {
height: 100%;
display: block;
overflow-y: scroll;
}
#data-table thead, #data-table tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
```
3. JavaScript (с использованием jQuery):
```html
$(document).ready(function() {
var table = $('#data-table');
var tableContainer = $('#table-container');
tableContainer.scroll(function() {
if(tableContainer[0].scrollHeight - tableContainer.scrollTop() === tableContainer.outerHeight()) {
// Загрузка новых данных и добавление их в таблицу
}
});
});
```
Этот код создаст бесконечный скролл в вашей таблице. При прокрутке до конца таблицы будут загружаться новые данные и добавляться в таблицу. Помните, что необходимо адаптировать данный код под свои потребности и структуру таблицы.