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

Question

У меня есть таблица, использующая DataTables, она содержит большое количество строк, и поэтому это заставляет страницу загружаться очень медленно, так как я предполагаю, что браузер ждет, пока таблица не заполнится, прежде чем отобразить страницу.

I хотел бы загрузить только одну страницу таблицы (10 строк) и показывать дополнительные данные только тогда, когда пользователь просматривает таблицу, показывать знак загрузки тоже было бы здорово.

Я исследовал и слышал о Функция DataTables под названием 'deferRender', которая должна делать то, что мне нужно, но я не могу заставить ее работать с моей таблицей.

В моей таблице 8 столбцов + html создается с использованием PHP который строит таблицу из данных в текстовом файле:

<?php


     $tdcount = 1; $numtd = 8; // number of cells per row
     $str = "<table id=\"table1\" class=\"table1 table table-striped table-bordered\">
                                     <thead>
                                     <th>1</th>
                                     <th>2</th>
                                     <th>3</th>
                                     <th>4</th>
                                     <th>5</th>
                                     <th>6</th>
                                     <th>7</th>
                                     <th>8</th>
                 </thead>
                                     <tbody>

 ";
     $f = fopen("tabledata.txt", "r");
     if ( $f === FALSE ) {
 exit;
    }
     while (!feof($f)) {
         $arrM = explode(",",fgets($f));
         $row = current ( $arrM );
         if ($tdcount == 1)
             $str .= "<tr>"; $str .= "<td>$row </td>";
         if ($tdcount == $numtd) {
             $str .= "</tr>";
             $tdcount = 1;
         } else {
             $tdcount++;
         }
     }
     if ($tdcount!= 1) {
         while ($tdcount <= $numtd) {
             $str .= "<td>&nbsp;</td>"; $tdcount++;
         } $str .= "</tr>";
     }
     $str .= "</tbody></table>";
     echo $str;

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

<script>
        $(document).ready(function() {
        $('#table1').basictable({
          forceResponsive: false
          });
        $('#table1').DataTable( { "order": [[ 0, "desc" ]] } );

          });

</script>

Я прочитал инструкции здесь: https://datatables.net/examples/server_side/defer_loading.html и знаю, что мне нужно добавить параметры в JS:

"processing": true,
"serverSide": true,
"ajax": "scripts/server_processing.php",
"deferLoading": 57

и использовать сценарий server_processing, однако в примере показано, как использовать его при подключении к БД , а не когда данные загружаются из текстового файла с php.

Как я могу получить это?

Answer 1

Это будет сосредоточено исключительно на аспектах DataTables "серверного" решения. То, как вы пишете серверную логи c, необходимую для ее поддержки, выходит за рамки этого ответа. Но я надеюсь, что эти заметки как минимум прояснят, какой должна быть эта логика c, и как вы можете к ней подойти.

Допущения

Предположим, у вас есть текстовый файл, содержащий 1000 строк данных как этот (или миллион - но слишком много строк для отправки в браузер и в DataTables, все сразу). Текстовый файл представляет собой простой файл с разделителями каналов, с тремя полями:

id|name|description
1|widget_1|This is a description for widget 1
2|widget_2|This is a description for widget 2
3|widget_3|This is a description for widget 3
...
1000|widget_1000|This is a description for widget 1000

Вы хотите отправлять 10 элементов одновременно в DataTables, используя обработку на стороне сервера.

Ваши данные сопоставляется с простой структурой JSON, например: массив объектов (каждый объект - одна запись):

[
    {
        "id": 1,
        "name": "widget_1",
        "description": "This is a description for widget 1"
    },
    {
        "id": 2,
        "name": "widget_2",
        "description": "This is a description for widget 2"
    },
    ... // more records...
]

Определение DataTable

Ваше определение данных может выглядеть следующим образом - оно намеренно очень просто, на данном этапе:

<body>

<div style="margin: 20px;">

<table id="demo" class="display dataTable cell-border" style="width:100%">
</table>

</div>

<script type="text/javascript">

  $(document).ready(function() {
    $('#demo').DataTable({
      serverSide: true,
      ajax: {
        url: 'http://localhost:7000/data',
        type: 'POST'
      },
      columns: [
        { title: 'ID',
          data: 'id' },
        { title: 'Name',
          data: 'name' },
        { title: 'Description',
          data: 'description' }
      ]
    });

  });
</script>

</body>

Первоначальный ответ

Когда веб-страница впервые отображается, она отправит начальный запрос POST на URL (* 1021). *: 7000 / data ), и он будет ожидать получения ответа JSON от веб-сервера, содержащего данные для отображения.

Поскольку DataTables использует serverSide: true, DataTables будет ожидать JSON иметь указанную c структуру, как описано здесь .

В частности, сервер должен добавить все обязательные поля (draw, recordsTotal, recordsFiltered и data) на JSON, которые он отправляет в DataTables .

В нашем случае это будет выглядеть так: обратите внимание, что это просто наша ранее упомянутая структура JSON с добавлением нескольких дополнительных полей метаданных:

{
    "draw": 1,
    "recordsTotal": 1000,
    "recordsFiltered": 1000,
    "data": [{
        "id": 1,
        "name": "widget_1",
        "description": "This is a description for widget 1"
    }, {
        "id": 2,
        "name": "widget_2",
        "description": "This is a description for widget 2"
    }, {
        "id": 3,
        "name": "widget_3",
        "description": "This is a description for widget 3"
    }, {
        "id": 4,
        "name": "widget_4",
        "description": "This is a description for widget 4"
    }, {
        "id": 5,
        "name": "widget_5",
        "description": "This is a description for widget 5"
    }, {
        "id": 6,
        "name": "widget_6",
        "description": "This is a description for widget 6"
    }, {
        "id": 7,
        "name": "widget_7",
        "description": "This is a description for widget 7"
    }, {
        "id": 8,
        "name": "widget_8",
        "description": "This is a description for widget 8"
    }, {
        "id": 9,
        "name": "widget_9",
        "description": "This is a description for widget 9"
    }, {
        "id": 10,
        "name": "widget_10",
        "description": "This is a description for widget 10"
    }]
}

Это сервер ответственность за построение этого JSON - первые 10 записей набора данных сервера. Сервер также сообщает DataTables, что он имеет в общей сложности 1000 записей и что он не отфильтровал никаких данных (пока) - следовательно, после фильтрации также имеется в общей сложности 1000 записей.

DataTables нуждается во всем этом информация, поэтому он знает, сколько кнопок разбивки на страницы нужно отобразить, и какие данные разбивки на страницы нужно показать.

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

Клиент (браузер) может отображать только 10 записей, поэтому это происходит быстро.

(я только что заметил, что на скриншоте упоминается «500 записей» - это ошибка в моем коде на стороне сервера - фильтра нет, поэтому мне нужно это исправить).

Последующие запросы

Когда пользователь нажимает на кнопка навигации по странице (например, страница «4»), которая запускает новый запрос от DataTables к серверу. DataTables создает этот запрос автоматически, используя поля, описанные здесь .

Запрос отправляется как данные формы.

В нашем примере запрос выглядит так:

"Form data": {
    "draw": "5",
    "columns[0][data]": "id",
    "columns[0][name]": "",
    "columns[0][searchable]": "true",
    "columns[0][orderable]": "true",
    "columns[0][search][value]": "",
    "columns[0][search][regex]": "false",
    "columns[1][data]": "name",
    "columns[1][name]": "",
    "columns[1][searchable]": "true",
    "columns[1][orderable]": "true",
    "columns[1][search][value]": "",
    "columns[1][search][regex]": "false",
    "columns[2][data]": "description",
    "columns[2][name]": "",
    "columns[2][searchable]": "true",
    "columns[2][orderable]": "true",
    "columns[2][search][value]": "",
    "columns[2][search][regex]": "false",
    "order[0][column]": "1",
    "order[0][dir]": "asc",
    "start": "30",
    "length": "10",
    "search[value]": "",
    "search[regex]": "false"
}

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

В нашем случае наиболее важными являются следующие поля:

"start": "30",
"length": "10"

Начните со строки 30 и предоставьте 10 записей.

Опять же, ответственность за подготовку ответа JSON лежит на сервере.

В нашем случае это означает сервер должен иметь лог c для чтения текстового файла до правильной начальной точки (строка данных 31 - запомните, что смещение начинается с нуля) и всего 10 строк (строки с 31 по 40).

Другие поля в приведенном выше запросе от DataTables описывают, как данные должны быть отсортированы и отфильтрованы. В нашем случае нет фильтра "search[value]": "", - и данные должны сортироваться по первому столбцу в порядке возрастания.

Заключительные примечания

Я специально не описал следующее:

1) Как ваш серверный код обрабатывает создание ответов JSON, которые он отправляет обратно в DataTables;

2) Как ваш серверный код анализирует запросы формы, полученные из DataTables.

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

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