Как определить первую, предыдущую, следующую, последнюю нажатую кнопку в полном типе подкачки в 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"
} );