How to detect first,previous,next,last button clicked in full pagingtype in Datatable

Question

You can go to UPDATE 2 directly

I have a huge table so fetch offset, limit is not going to work as it is taking ages. So, I am thinking to move to key seek paging method so my query is going to be different for each click as mentioned below:

/*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;

So, I need to run different queries according to clicked buttons. So, a necessity of detecting different click is raised. If there is any inbuilt method that's great. Otherwise, any other hacks to deal with this situation is also welcomed.

Furthermore, I can see different id on each li something like

<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>

So, I have also tried doing the following but with no success

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

How, can I get rid out from this problem. I am using server-side data table which can be referenced from https://datatables.net/

Update:

Now, I could detect the click however I am unable to send this new data to the server. In case, if I set var page = 'first';. This send page as 'first on every request.'

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}
                }
        ......
});

These console.log shows the correct page after each button clicked but the value is not sending with other params at the moment.

Update: 2

Currently, my code looks like below. It is sending past page state. This means if I first click next it won't send page but if I now click previous, then this time it will send the page as next instead of the page as previous. This looks like it is sending ajax request first and updating page value later. Now, I just need to fix this means need to update page value first before sending 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"
} );

Answer 1

It should be possible to read the page variable just before the ajax is sent and add this to the request.

Add this after you code:

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

preXhr Ajax event - fired before an Ajax request is made.

Update: The onclick events seem to run after the ajax-call is constructed. To get around this, onmousedown ja ontouchstart events can be used instead. They should run before the default onclick event

Replace all click jQuery events with mousedown and touchstart:

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

Update 2:

A more elegant solution to make the click run before the ajax-call and attacht the right page value is to add the listener to the actual link element, not the parent button.

Add the a to the selectors: .paginate_button.first:not(.disabled) a This will make it work.

$('.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);
        });