Быстрый AJAX поиск для pdoPage
Добрый день.
Подскажите, пожалуйста, есть ли быстрый ajax поиск по типу как в datatables.net/, но для работы в связке с pdoPage?
Планируется выводить более 30000 записей и подобный поиск очень бы пригодился.
Подскажите, пожалуйста, есть ли быстрый ajax поиск по типу как в datatables.net/, но для работы в связке с pdoPage?
Планируется выводить более 30000 записей и подобный поиск очень бы пригодился.
Комментарии: 4
Добрый день. Можно в datatables подставить json ресурсов и фильтровать их.
Уже делал такую работу могу показать как все работает.
Уже делал такую работу могу показать как все работает.
- [[!#GET.sortby:default=`Id`]] — через GET из dataTable с помощью ajax передаем параметры для сортировки
- &tvFilters=`SecondName==%[[!#GET.search:default=``]]%` — точно так же передаем данные для поиска
- &tpl=`patientListTpl` — данные которые необходимо передать dataTable с целью отображения их в таблице. Формат данных:
Каждое значение в кавычках соответсвует столбцам таблицы. В конце строки нужна запятая!["[[+tv.Id]]","[[+tv.SecondName]]","[[+tv.Note]]"],
Спасибо за ответ.
Если вас не затруднит — поделитесь, пожалуйста, ссылкой на пример или примером кода.
Если вас не затруднит — поделитесь, пожалуйста, ссылкой на пример или примером кода.
У меня это сделано на закрытой CRM системе. Могу только по демонстрации экрана показать. Напишите свой вайбер или скайп мне в ЛС.
Спасибо за предложение! Я в итоге увлекся и сделал сам :)
Результат прикрепляю ниже. Может кому пригодится.
На правильность метода не претендую, для меня это рабочий вариант) От прорисовки страницы до загрузки таблицы с 30000 строк = 2,1 сек.
pdoPage сниппет. С ним одна проблема — он выводит результат на страницу, который нам не нужен. Пока не понял как его убрать — просто вывожу в скрытый div.
Комментарии:
Инициализация dataTable:
Результат прикрепляю ниже. Может кому пригодится.
На правильность метода не претендую, для меня это рабочий вариант) От прорисовки страницы до загрузки таблицы с 30000 строк = 2,1 сек.
pdoPage сниппет. С ним одна проблема — он выводит результат на страницу, который нам не нужен. Пока не понял как его убрать — просто вывожу в скрытый div.
<div style="display:none">
[[!pdoPage?
&parents=`2`
&ajaxMode=`default`
&sortby=`[[!#GET.sortby:default=`Id`]]`
&sortdir=`[[!#GET.sortdir:default=`desc`]]`
&tvFilters=`SecondName==%[[!#GET.search:default=``]]%`
&tpl=`patientListTpl`
&includeTVs=`Id,SecondName,Note`
&limit=`10`
]]
</div>
Комментарии:
Инициализация dataTable:
$(function () {
var orderparam = [0, "desc"]; //сортировка по дефолту по первому столбцу таблицы
var columnparam = ["Id", "SecondName", "Note"]; //столбцы таблицы
var table = $("#example1").DataTable({
"order": [orderparam],
"lengthChange": false,
"processing": true,
"serverSide": true, //определяет в каком формате мы отправим данные для dataTable в callback
"ajax": function (data, callback, settings) {
var pageinfo = table.page.info(); //узнаем номер страницы для передачи в pdoPage
var orderinfo = table.order(); //узнаем сортировку для pdoPage
var searchinfo = table.search(); //данные поиска для pdoPage
//перед заполнением таблицы запрашиваем данные у pdoPage с помощью get запроса
$.ajax({
url: "kartoteka?page=" + (pageinfo.page + 1) + '&sortby=' + columnparam[orderinfo[0][0]] + '&sortdir=' + orderinfo[0][1] + '&search=' + searchinfo,
}).then(function (json, textStatus, jqXHR) {
var json = JSON.parse(json); //получаем JSON от pdoPage
var output = json.output.replace(/,\s*$/, ""); //берем только нужные нам данные. Убираем лишнюю запятую.
var dr = JSON.parse('{"data":[' + output + ']}'); //полученные нами данные - текст. Конвертируем его в JSON.
//все что мы получили отдаем для заполнения таблицы
callback({
draw: data.draw, //специальный счетчик обращений dataTable
recordsTotal: json.total, //количество строк в ответе от pdoPage
recordsFiltered: json.total, //количество строк в ответе от pdoPage
data: dr.data //данные для заполнения
});
});
},
//если вдруг нужны кнопки. Они отрисовываются после заполнения таблицы. Поэтому, кнопки добавляем с помощью initComplete
"buttons": ["colvis"],
"initComplete": function () {
table.buttons().container().appendTo($('#example1_wrapper .col-md-6:eq(0)')); //обратите внимание не селекторы, у вас они могут отличаться
}
});
});
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.