Быстрый AJAX поиск для pdoPage

Добрый день.

Подскажите, пожалуйста, есть ли быстрый ajax поиск по типу как в datatables.net/, но для работы в связке с pdoPage?

Планируется выводить более 30000 записей и подобный поиск очень бы пригодился.
Сергей
11 июня 2021, 18:31
modx.pro
2
606
0

Комментарии: 4

Сергій
12 июня 2021, 05:21
+1
Добрый день. Можно в datatables подставить json ресурсов и фильтровать их.
Уже делал такую работу могу показать как все работает.
    Сергей
    12 июня 2021, 11:36
    0
    Спасибо за ответ.
    Если вас не затруднит — поделитесь, пожалуйста, ссылкой на пример или примером кода.
      Сергій
      12 июня 2021, 12:12
      0
      У меня это сделано на закрытой CRM системе. Могу только по демонстрации экрана показать. Напишите свой вайбер или скайп мне в ЛС.
        Сергей
        14 июня 2021, 00:48
        0
        Спасибо за предложение! Я в итоге увлекся и сделал сам :)
        Результат прикрепляю ниже. Может кому пригодится.
        На правильность метода не претендую, для меня это рабочий вариант) От прорисовки страницы до загрузки таблицы с 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>

        Комментарии:
        1. [[!#GET.sortby:default=`Id`]] — через GET из dataTable с помощью ajax передаем параметры для сортировки
        2. &tvFilters=`SecondName==%[[!#GET.search:default=``]]%` — точно так же передаем данные для поиска
        3. &tpl=`patientListTpl` — данные которые необходимо передать dataTable с целью отображения их в таблице. Формат данных:
          ["[[+tv.Id]]","[[+tv.SecondName]]","[[+tv.Note]]"],
          Каждое значение в кавычках соответсвует столбцам таблицы. В конце строки нужна запятая!

        Инициализация 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)')); //обратите внимание не селекторы, у вас они могут отличаться
                }
            });
        });
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    4