title: How to detect first,previous,next,last button clicked in full pagingtype in Datatable
body: <p>You can go to UPDATE 2 directly</p>
  
  <p>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:</p>
  
  <pre><code>/*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 &lt; @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 &gt; @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;
  </code></pre>
  
  <p>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.</p>
  
  <p>Furthermore, I can see different id on each li something like</p>
  
  <pre><code>&lt;li class="paginate_button page-item next" id="DataTable_next"&gt; 
      &lt;a href="#" aria-controls="coloradoDataTable" data-dt-idx="2" tabindex="0" class="page-link"&gt;Next&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>So, I have also tried doing the following but with no success</p>
  
  <pre><code>$('#DataTable_last&gt;a').click(function() { alert('zz'); });
  </code></pre>
  
  <p>How, can I get rid out from this problem. I am using server-side data table which can be referenced from <a href="https://datatables.net/" rel="noreferrer">https://datatables.net/</a></p>
  
  <h2>Update:</h2>
  
  <p>Now, I could detect the click however I am unable to send this new data to the server. In case, if I set <code>var page = 'first';</code>. This send page as 'first on every request.'</p>
  
  <pre><code>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}
                  }
          ......
  });
  </code></pre>
  
  <p>These <code>console.log</code> shows the correct page after each button clicked but the value is not sending with other params at the moment.</p>
  
  <p><strong>Update: 2</strong></p>
  
  <p>Currently, my code looks like below. It is sending past page state. This means if I first click <code>next</code> it won't send page but if I now click <code>previous</code>, then this time it will send the page as <code>next</code> instead of the page as <code>previous</code>. <em>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.</em> </p>
  
  <pre><code>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"
  } );
  </code></pre>