DataTables прокручивается в строку с разбитыми на страницы данными ajax

Question

В DataTables я могу автоматически добавлять идентификатор в каждую строку <tr> моей таблицы, указав DT_RowId в моих данных ответа ajax.Это означает, что каждая строка получает атрибут id, например,

<tr id="row_45">
    <td>foo</td>
    <td>bar</td>
</tr>

. Это полезно в моем приложении, потому что это означает, что я могу использовать URL-адреса, такие как: /#row_45 и показывать строку 45 в верхней частиpage.

Это прекрасно работает, если строки находятся на странице 1.

Мое приложение показывает 250 строк на странице, и каждая страница генерируется с помощью запроса ajax.Иногда есть> 1000 страниц.Поэтому, если я попытался открыть строку 999 (/#row_999) таким же образом, она не сработает, потому что данные для нее не находятся в документе.

Я использую нумерацию страниц и таблицы данных в "режим сервера ».Это означает, что все данные отсутствуют при загрузке страницы, что усложняет эту проблему.Если я нажимаю «страница 3» на пагинации, он выполняет запрос ajax для записей 750 - 1000 (250 на страницу).

Кто-нибудь знает, есть ли обходной путь к этому?

DataTables версия 1.10.16

Answer 1

Ключ к решению этой проблемы, который никто на самом деле не рассматривал, заключается в следующем: как указано в вопросе, мы используем DataTables в режиме serverSide.Он имеет нумерацию страниц, и когда вы нажимаете на каждую страницу, он делает отдельный запрос AJAX, чтобы загрузить только данные для этой страницы.Так, например, если вы щелкнете по странице 2, 3, 4, он сделает 3 отдельных запроса ajax - по одному на страницу.В этом и заключается проблема - если вы хотите прокрутить строку 999, вы должны ответить на вопрос "на какой странице появляется строка 999" ?

Единственный способ, которым вы можете сделатьэто вызывает серверный скрипт, который вычислит номер страницы и вернет его js, используемому приложением .Причина, по которой это необходимо, заключается в том, что если, например, вы были на странице 1, а строка 999 оказалась на странице 4, у вас нет строк для страницы 4 где-либо в DOM;на самом деле у вас их не будет вообще, пока вы не нажмете на страницу 4 на нумерации страниц.

Итак, первое, что нужно сделать, это сделать ajax-запрос к конечной точке, которая вычисляет номер этой страницы и возвращает целое число. Как рассчитывается номер страницы, зависит от приложения .@Sascha Gottfried как бы намекнул на это в своем ответе.В нашем приложении строки не являются последовательными , т.е. вы можете иметь row_999, за которыми следует row_1052:

• Если они последовательные Вы можете сделать что-то эквивалентное ceil(999/250), которое сообщит вам, что строка 999 появляется на странице 4, когда на странице 250 записей.

• Если они НЕ последовательные (как в моем случае), конечная точка должна обеспечивать средства для ее расчета.Там нет четкого ответа на то, как вы это делаете.В нашем приложении это зависит от нескольких параметров поиска / фильтрации, что может привести к тому, что строки будут не в порядке.Однако все, что нужно сделать сценарию, это вернуть целое число, например, echo json_encode(['page' => 4]);

После того, как это число рассчитано, вы должны вызвать эквивалентный щелчок для «страницы 4» (или любого другого номера страницыВы хотите) в DataTables.Это можно сделать в jquery, нацелив якоря внутрь .dataTables_paginate.

Затем вам нужно прокрутить вниз до строки - некоторая информация была предоставлена ​​@ygorbunkov по этому поводу.Отсутствует или неочевидно, что вам нужно дождаться, пока запрос ajax для заполнения DataTable завершит , прежде чем попытаться прокрутить строку - иначе данные не будут доступны для прокрутки.Это можно сделать, вложив .done() в запросе ajax к конечной точке, которая получает данные для страницы 4.

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

Answer 2

Можно ли предположить, что число в id является последовательным порядковым номером формы 0?

Тогда мы можем определить номер страницы из id и заставить dataTables загрузить правильную страницу:

var rowIdx = '#row_45'.split('_')[1];
var table = $('#substancesTable').DataTable();

// Page number
var pageNo = Math.floor(rowIdx/table.page.info().length);

// Load page
table.page(pageNo).draw('page');

// Add scroll function if needed

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

// Make an ajax-call to get the rowIdx
var rowIdx = someAjaxFunctionToRequestThePageNo( '#row_45'.split('_')[1] );

var table = $('#substancesTable').DataTable();

// Page number
var pageNo = Math.floor(rowIdx/table.page.info().length);

// Load page
table.page(pageNo).draw('page');

// Add scroll function if needed

Answer 3

Так StackOverflow обращается к уникальной сущности, использующей URI, и использует идентификатор DOM для навигации по веб-странице, отображаемой браузером.

/8412912/datatables-filtrovat-dannye-iz-istochnika-ajaxcomment96759679_55000876

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

Вы должны встроить это в свое приложение.Простого обходного пути нет.

Документы

• Обработка на сервере - примеры
• Обработка на сервере - вручную

Рекомендуемое содержимое

• Глубокая ссылка на DataTables
• Плагин Keep Condition - по предыдущей статье оГлубокая ссылка

Answer 4

Собственный Javascript имеет scrollIntoView:

var el = getElementById('row_4');
el.scrollIntoView(true);