Datatables - Как создать слушателя, когда прокрутка находится в нижней части таблицы? - PullRequest
Новая
       12

Datatables - Как создать слушателя, когда прокрутка находится в нижней части таблицы?

1 голос
/ 15 марта 2019

В настоящее время я использую datatablesJS (из https://datatables.net/), чтобы показать массив результатов из разбитой на страницы базы данных. Поэтому при начальной загрузке пользователь получает индексы 0 и 100 строк.

Я пытаюсь написать функцию, чтобы, когда пользователь прокручивает страницу ближе к нижней части таблицы, он запрашивал дополнительную таблицу и добавлял результаты в текущий массив данных. У меня есть настройка запроса, но я не знаю функции jquery или datatablesJS, которая прослушивает, как далеко прокручивается нижняя часть его максимальной длины прокрутки. Какие-либо предложения?

Примечание. Этот вопрос похож на На свитках dataTable данные должны загружаться со стороны сервера и добавляться к существующим записям , но разница в том, что я хочу запрашивать только тогда, когда пользователь прокручивает страницу до конца. Этот пост и то, что я вижу в документе DataTables, показывают, что они запускают Timeout, пока не получат все данные с параметром ajax для Datatables.

1 Ответ

1 голос
/ 15 марта 2019

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

Эта демонстрация должна дать вам несколько советов о том, как это сделать.это. 

$(function() {

  var $mytable = $("#myTable");
  var count = 3; //initial number of rows 
  var max = 50; //max number of rows (just for demo)
  var $datatable = $mytable.DataTable({
    "paging": false,
    "bFilter": false
  }); //init the datatable and return a refence to it



  //listen for scroll and resize and custom 'fetchmore' events
  $(window).bind('scroll resize fetchmore', function() {
    var viewportHeight = window.innerHeight;
    var scrolltop = $(window).scrollTop();
    var bottomOfTable = $mytable.offset().top + $mytable.outerHeight();

    //console.log(viewportHeight, scrolltop, bottomOfTable);

    if ($(window).scrollTop() + viewportHeight >= bottomOfTable) {
      if (count < max) {
        //console.log("Fetch more data!");
        load_more();
        $(window).trigger("fetchmore"); //keep triggering this event until we've filled the viewport
      }
    }



  });

  function load_more() {
    //fetch more data here
    count++;
    $datatable.row.add([
      count + '.1',
      count + '.2 (loaded@' + Date.now() + ')'
    ]).draw(false);
  }

  //trigger initial fetch
  $(window).trigger("fetchmore");
});
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>

<body>
  <table id="myTable" class="display">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.1</td>
        <td>1.2 (initial row)</td>
      </tr>
      <tr>
        <td>2.1</td>
        <td>2.2 (initial row)</td>
      </tr>
      <tr>
        <td>3.1</td>
        <td>3.2 (initial row)</td>
      </tr>
    </tbody>
  </table>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...