Как определить первую, предыдущую, следующую, последнюю нажатую кнопку в полном типе подкачки в Datatable

Вы можете перейти на ОБНОВЛЕНИЕ 2 напрямую

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

/*First*/
select top (1000) id, name from table_name order by id desc;
/*returns data from 56679923-56678924*/

/*Next*/
select top (1000) id,name from table_name where id < @previous_lowest_id order by id desc;
/*returns data from 56678923-56677924*/

/*Previous*/
SELECT * FROM 
     (select top (1000) id,name 
       from table_name 
       where id > @previous_highest_id 
       order by id asc
     ) as myAlias 
ORDER BY id desc;
/*returns data from 56679923-56678924*/

/*Last*/
SELECT * FROM 
    (select top (1000) id,name
      from table_name
      order by id asc
    ) as myAlias 
ORDER BY id desc;

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

Кроме того, я могу видеть разные идентификаторы на каждом li что-то вроде

<li class="paginate_button page-item next" id="DataTable_next"> 
    <a href="#" aria-controls="coloradoDataTable" data-dt-idx="2" tabindex="0" class="page-link">Next</a>
</li>

Итак, я также попытался сделать следующее, но безуспешно

$('#DataTable_last>a').click(function() { alert('zz'); });

Как я могу избавиться от этой проблемы. Я использую таблицу данных на стороне сервера, на которую можно ссылаться с https://datatables.net/

Обновить:

Теперь я могу обнаружить щелчок, но не могу отправить эти новые данные на сервер. В случае, если я установил var page = 'first'; , Эта страница отправляется как "первая на каждый запрос".

var page;
var dataTable = $('#DataTable').DataTable( {

                drawCallback: function(){
                    $('.paginate_button.first:not(.disabled)', this.api().table().container())          
                    .on('click', function(){
                        page = 'first';
                        console.log(page);
                    });
                    $('.paginate_button.previous:not(.disabled)', this.api().table().container())          
                    .on('click', function(){
                        page = 'previous';
                        console.log(page);
                    });
                    $('.paginate_button.next:not(.disabled)', this.api().table().container())          
                    .on('click', function(){
                        page = 'next';
                        console.log(page);
                    });
                    $('.paginate_button.last:not(.disabled)', this.api().table().container())          
                    .on('click', function(){
                        page = 'last';
                        console.log(page);
                    });       
                },
    "ajax": {
                    "url":base_path +'/other_path',
                    "dataType":"json",
                    "type":"POST",
                    "data":{"_token":csrf_token,"page":page}
                }
        ......
});

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

Обновление: 2

В настоящее время мой код выглядит следующим образом. Это отправка мимо состояния страницы. Это означает, что если я сначала нажму " next, страница не будет отправлена, но если я теперь нажму " previous, то на этот раз она отправит страницу как next а не как previous. Похоже, что сначала отправляется ajax-запрос, а позже обновляется значение страницы. Теперь мне просто нужно исправить это означает, что нужно сначала обновить значение страницы перед отправкой ajax.

var page;

var dataTable = $('#masterDataTable').on('preXhr.dt', function (e, settings, data) {
    data.page = page;
}).DataTable( {

    drawCallback: function(){
        $('.paginate_button.first:not(.disabled)', this.api().table().container())          
        .on('click', function(){
            page = 'first';
            console.log(page);
        });
        $('.paginate_button.previous:not(.disabled)', this.api().table().container())          
        .on('click', function(){
            page = 'previous';
            console.log(page);
        });
        $('.paginate_button.next:not(.disabled)', this.api().table().container())          
        .on('click', function(){
            page = 'next';
            console.log(page);
        });
        $('.paginate_button.last:not(.disabled)', this.api().table().container())          
        .on('click', function(){
            page = 'last';
            console.log(page);
        });       
    },

    "processing": true,
    "serverSide": true,
    "searching": false,
    "ajax": {
        "url":base_path +'/other_path',
        "dataType":"json",
        "type":"POST",
        "data":{"_token":csrf_token,"page":page}
    },
    "columns":[
    {"data":"name"},
    {"data":"address"},
    {"data":"city"},
    {"data":"action","searchable":false,"orderable":false}
    ],
    "aLengthMenu": [50, 100, 250, 500],
    "pageLength": 50,

    "ordering": false,
    "pagingType": "full"
} );

Ответы

Ответ 1

Должна быть возможность прочитать переменную page непосредственно перед отправкой ajax и добавить ее в запрос.

Добавьте это после кода:

$('#DataTable').on('preXhr.dt', function (e, settings, data) {
    data.page = page;
})

preXhr Ajax - запускается перед выполнением запроса Ajax.

Обновление: Кажется, что события onclick запускаются после создания ajax-вызова. Чтобы обойти эту проблему, onmousedown JA ontouchstart события может быть использован вместо. Они должны быть запущены до события onclick по умолчанию

Замените все события click jQuery на mousedown и touchstart:

$('.paginate_button.last:not(.disabled)', this.api().table().container())          
.on('mousedown touchstart', function(){
    page = 'last';
    console.log(page);
});

Обновление 2:

Более элегантное решение для запуска клика перед ajax-вызовом и прикрепления правильного значения page - добавить слушателя к фактическому элементу ссылки, а не к родительской кнопке.

Добавьте a к селекторам: .paginate_button.first:not(.disabled) a Это заставит его работать.

$('.paginate_button.first:not(.disabled) a', this.api().table().container())          
        .on('click', function(){
            page = 'first';
            console.log(page);
        });
        $('.paginate_button.previous:not(.disabled) a', this.api().table().container())          
        .on('click', function(){
            page = 'previous';
            console.log(page);
        });
        $('.paginate_button.next:not(.disabled) a', this.api().table().container())          
        .on('click', function(){
            page = 'next';
            console.log(page);
        });
        $('.paginate_button.last:not(.disabled) a', this.api().table().container())          
        .on('click', function(){
            page = 'last';
            console.log(page);
        });

Ответ 2

DataTables отправляют start и length в теле запроса, я думаю, что это проще использовать, не нужно сравнивать, что это за page, и сортировать код. например, pageLength равен 50 и next или нажата page 2 после чего DataTables отправит start: 50, length: 50 тела start: 50, length: 50 и ваш запрос будет похож

SELECT id, name
FROM table_name
ORDER BY id DESC
LIMIT @length OFFSET @start /* LIMIT 50 OFFSET 50 */

но если вы хотите использовать эту page, в функции beforeSend() вы можете попытаться прервать Ajax-запрос, если событие нажатия для кнопки еще не запущено.

var page;
var navClicked = false;
// do not abort ajax for first ajax request or initialization.
var firstLoad = true;
$.ajaxSetup({
  beforeSend: function(jqXHR, settings) {
    // if button click event not yet fired abort ajax
    if (!firstLoad && navClicked == false) {
      jqXHR.abort();
    }
  },
  complete: function() {
    firstLoad = false;
    navClicked = false;
  }
});

затем замените drawCallback: function(){...} на

drawCallback: function() {
  $('.paginate_button').on('click', function(e) {
    page = this.textContent.toLowerCase(); // first, previous, next, last
    navClicked = true;
    // 'page' already defined click again this button and do ajax request
    this.click()
  })
},

Ответ 3

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

$(function(){

            var page;
            var HighestID,LowestID;

                document.addEventListener("click", function(e) {
                    if($(e.target).parent().hasClass('previous')){
                        page = 'previous';
                    }else if($(e.target).parent().hasClass('next')){
                        page = 'next';
                    }else if($(e.target).parent().hasClass('last')){
                        page = 'last';
                    }else{
                        page = 'first';
                    }

                }, true);


            var dataTable = $('#Datatable').on('preXhr.dt', function (e, settings, data) {
                data.page = page;
                data.HighestID = HighestID;
                data.LowestID = LowestID;
            }).DataTable( {

                "processing": true,
                "serverSide": true,
                "searching": false,
                "ajax": {
                    "url":base_path +'/admin/other_path',
                    "dataType":"json",
                    "type":"POST",
                    "data":{"_token":csrf_token}
                },
                "columns":[
                {"data":"name_voter"},
                {"data":"home_street_address_1"},
                {"data":"home_address_city"},
                {"data":"action","searchable":false,"orderable":false}
                ],
                "aLengthMenu": [50, 100, 250, 500],
                "pageLength": 50,

                "ordering": false,
                "pagingType": "full"
            } );

            dataTable.on( 'xhr', function () {
                var json = dataTable.ajax.json();
                HighestID = json.HighestID;
                LowestID = json.LowestID;
            } );

});