Ответ 1

TL; DR: Вероятно, вы должны использовать либо deferRender с обработкой на стороне клиента или на стороне сервера без deferRender (путем фиксации данных JSON). Этот ответ предполагает, что вы хотите обработать на стороне сервера.

deferLoading

При правильном использовании обработки на стороне сервера поведение по умолчанию заключается в том, чтобы отправлять только количество строк на одной странице для каждого запроса ajax. Вам не нужно использовать deferLoading - вот что делает (из здесь > ):

При использовании обработки на стороне сервера режим работы по умолчанию для DataTables - это просто выбросить любые данные, которые в настоящее время существуют в таблице, и сделать запрос на сервер, чтобы отобразить первую страницу данных. Это нормально для пустой таблицы, но если у вас уже есть первая страница данных, отображаемая в обычном HTML, это пустая трата ресурсов. Таким образом, этот параметр существует, чтобы вы могли указывать DataTables не выполнять этот первоначальный запрос, скорее он будет использовать данные уже на странице (к ним не будут применены никакие сортировки и т.д.).

Поскольку все ваши данные поступают из ajax, этот параметр не следует выбирать.

deferRender

Вам действительно не нужно использовать deferRender, если вы правильно используете обработку сервера. deferRender будет (из него документация здесь):

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

Обратите внимание на важную фразу здесь:

если вы загрузите набор данных с 10 000 строк

Если вы правильно работаете с обработкой серверов, вы должны загружать только количество строк на страницу в одной загрузке. deferRender - действительно вариант ускорения данных при использовании обработки клиентов. Обработка серверов уже обрабатывает то, что делает deferRender. См. Это изображение из DataTables FAQ для ускорения данных:

Обратите внимание, что он подчеркивает deferRender только для клиентов. Следует отметить, что если у вас нет большого количества строк (десятки тысяч +), вам, вероятно, не нужно будет использовать обработку по серверу.

Правильная обработка серверов:

Вероятно, ваша проблема связана с тем, что ваш API не возвращает правильную форму JSON для обработки на стороне сервера; вам нужно отправить больше информации, чем только данные для отображения. Вот страница документации с полным описанием (вы обязательно должны прочитать ее), но я попытаюсь описать основы ниже.

Запрос

Запрос, отправленный в ваш API, будет содержать некоторые данные, которые вам нужно адресовать.

draw - уникальный идентификатор, который отслеживает наборы пар запроса-ответа; значение в ответе должно соответствовать значению в запросе. Это то, как datatables соответствует запросам ответов.

start представляет запись, которая должна быть первой в ответе; если мы показываем 10 записей на странице, а мы на странице 2, start будет равно 10, так что в ответе мы отправляем только записи с номером 10-19.

length представляет ожидаемое количество строк для этой ничьи, поэтому в приведенном выше примере из 10 записей на странице на стр. 2 length будет равно 10. Вот сколько записей вы должны вернуть. Это значение будет основываться на параметрах lengthMenu или pageLength для инициализации Datatables. (Документировано здесь и здесь, соответственно)

Важно помнить, что часто забывают, ТОЛЬКО посылать столько строк, сколько length; не отправляйте все свои строки в первый запрос.

ответ

Ваш ответ также должен быть изменен. В принципе, вместо того, чтобы просто возвращать data, вам нужно вернуть объект, который выглядит как пример ниже (из этой страница документации):

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        [
            "Angelica",
            "Ramos",
            "System Architect",
            "London",
            "9th Oct 09",
            "$2,875"
        ],
        [
            "Ashton",
            "Cox",
            "Technical Author",
            "San Francisco",
            "12th Jan 09",
            "$4,800"
        ],
        ...
    ]
}

Обратите внимание на дополнительные данные: draw, recordsTotal и recordsFiltered в дополнение к обычному data. Это необходимые параметры при использовании обработки серверов.

draw представляет число, соответствующее запросу, сделанному вашему API; запрос GET также будет иметь значение draw, а значение в GET должно соответствовать значению в ответе.

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

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

Боковое примечание

В качестве побочного примечания; bServerSide должен быть serverSide, а bPaginate должен быть paging, если вы используете DataTables версии 1.10 или новее.

Ответ 2

Вы также можете сделать это с помощью iDisplayLength:

$('#example').DataTable( {
        "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
        "iDisplayLength": 10,
        "bPaginate": true,
        "processing": true,
        "bServerSide": true,

        ajax: {
            url: 'https://api.myjson.com/bins/1egsx',
            dataSrc: 'data'
        },
        columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
        ],

    } );

Ответ 3

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

Случай 1: Только хотите загрузить частичные данные из источника

Все данные будут извлекаться из https://api.myjson.com/bins/1egsx ', прежде чем DataTable обработает данные. Если вы хотите получать только частичные данные из URL-адреса, вы можете создать свою настраиваемую функцию, которая будет анализировать данные в интерактивном режиме AJAX (readyState = 3), останавливаться после приема первых 10 записей, а затем массировать данные и передавать их как входные данные для DataTable. Вот краткое описание того, что вам нужно сделать

var inputData = '';
function loadDataTablePreview() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 3 && this.status == 200) {
        inputData += this.responseText;
        // Count the number of closing '}'. If its 10, lets start processing our data
        // Get the index of 10 closing '}'
        // Create a substring of inputData
        // append ']}'
        // Now JSON Decode
        var decodedData = JSON.parse(inputData);
        // Now create an instance of the DataTable passing this data as the input data 
        $('#example').DataTable( {
          "bPaginate": true,
          "processing": true,
          "bServerSide": true,
          data: decodedData,
          columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
          ],
        });
    }
    else if (this.readyState == 4 && this.status == 200) {
       // JSON Decode the data and store it to load later
    }
  };
  xhttp.open("GET", "https://api.myjson.com/bins/1egsx", true);
  xhttp.send();
}

$(document).ready(function() {
  loadDataTablePreview();
}

Случай 2: загружайте первые 10 записей после загрузки всех данных

Предполагая, что все в порядке с загрузкой всех данных, перед отображением DataTable вы можете создать функцию для вашего dataSrc, как показано ниже. На дисплее отобразится только 10 записей в таблице. Вы можете дополнительно сохранить весь JSON в этой функции в хранилище данных браузера (например, sessionStorage), а затем запустить JS-функцию для загрузки всего JSON в более поздний момент времени.

$(document).ready(function() {

  $('#example').DataTable( {
    "bPaginate": true,
    "processing": true,
    "bServerSide": true,
    ajax: {
        url: 'https://api.myjson.com/bins/1egsx',
        dataSrc: function ( json ) {
                    // Store entire data in sessionStorage
                    // return the first 10 entries only for now
                    return json.data.slice(0,10);
                 },
    },
    columns: [
        { data: 'account_id' },
        { data: 'name' },
        { data: 'email' }
    ],
  });
});