Как создать виртуальный скроллер?

Question

Я хочу создать таблицу для сетки некоторых данных.В таблице может быть много данных (100K + строк).Поэтому я хочу показывать по 20 строк за раз с буфером в 100 строк.Когда пользователь прокручивает сетку вниз, он загружает дополнительные строки через ajax?Я видел, как это было сделано, но я действительно не знаю, как этого достичь?

Answer 1

Я обнаружил, что SlickGrid - это отличный плагин jQuery, который может обрабатывать массивы данных такого типа с помощью адаптивной виртуальной прокрутки, как вы описали. Это также очень красиво и имеет много других дополнительных функций.

Answer 2

Точно так же, как вы описываете.

Представьте себе jQuery , добавляющий <tr> к <table>. Это так просто.

СТОРОНА СЕРВЕРА
Скрипт вызывает строки с ограничениями SQL

// where ? represents entry_num that will be passed by jQuery
SELECT *
FROM table_x
LIMIT ?, 20

СТОРОНА КЛИЕНТА
jQuery помещает новые элементы в таблицу.

// server side will in check for entry number to give back the proper rows
$.ajax({
  url: "/getRows",
  data: "entry_num="+num,
  cache: false,
  success: function(html){
    $("#table").append(html);
  }
});

Answer 3

Недостатком виртуального скроллера UX (User eXperience) является то, что вы не предоставляете пользователю визуальную информацию об общей высоте прокручиваемой области.

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

Альтернатива постраничного представления большого набора данных хорошо работает для обеих проблем.Проверьте виджет таблицы данных YUI и сообщество .

Answer 4

Проверьте jQGrid: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:features

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