Как выполнить отложенную загрузку в Bootstrap-таблице при выборе опции «Все» в нумерации страниц? - PullRequest
Новая
       7

Как выполнить отложенную загрузку в Bootstrap-таблице при выборе опции «Все» в нумерации страниц?

0 голосов
/ 18 января 2019

Я пытаюсь визуализировать более 1000 строк на странице с параметром bootstrapTable pageList 'All'. Производительность работает нормально, когда я выбираю 10, 25, 50 и 100, но выбор опции «Все» приведет к замедлению работы страницы. Как я могу выполнить отложенную загрузку при прокрутке страницы или другими способами, которые могут повысить производительность? 

$('#table-users').bootstrapTable({
   pagination: true,
   pageList: [10, 25, 50, 100, 'All']
 )}

Код выше является плагином начальной загрузки. Я имею в виду использование jQuery для определения, когда прокрутка вниз страницы продолжает загружать данные, но я не могу найти решение для этого (например, сначала загрузить 100 строк, и страница прокручивается до 100-й строки, а затем загрузить следующую 100 строк.) Этот вид магии при выборе опции «Все» в нумерации страниц.

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

columns: [{
                field: 'email',
                title: 'Email',
                formatter: operateEmail,
                sortable: true,
            }]

, а функция manageEmail - 

function operateEmail(value, row, index) {
    if (index < 24){
        return ['<a class="memoryManager" href="/admin/users/view/'+ row['id']+'">'+value+'</a>'].join('');
    }
}

Я пытаюсь показать только 25 строк данных, когда я выбираю опцию страницы 50/100 / Все. но в результате таблица показывает 25 строк с данными, а остальные строки остаются пустыми. Я пытался использовать функцию прокрутки, но не похоже на работу. как я могу не показывать пустые строки, пока я не прокручиваю окна?

1 Ответ

0 голосов
/ 18 января 2019

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

var glblIndex = 0;
window.onscroll = function (e) {  
// called when the window is scrolled.  
  $('#appendMe').append(getDummyData(++glblIndex));
}

function getDummyData(nextVal){
 if (nextVal< 100)
  return "<div class='row'><div class='col-md-4'>"+nextVal+++"</div></div>"
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="appendMe">
dummy till page fill
<br/><br/><br/><br/><br/><br/>
dummy till page fill
<br/><br/><br/><br/><br/><br/>
dummy till page fill
<br/><br/><br/><br/><br/><br/>
dummy till page fill
<br/><br/><br/>
dummy till page fill
<br/><br/><br/>
dummy till page fill
<br/><br/><br/>
dummy till page fill
<br/><br/><br/>
dummy till page fill
</div>
...