Javascript 如何检测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;

我怎样才能摆脱这个问题呢。我使用的是服务器端数据表，可以从

更新： 现在，我可以检测到点击，但我无法将此新数据发送到服务器。在这种情况下，如果我设置

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之前需要首先更新页面值

在发送ajax之前，应该可以读取
页面
变量，并将其添加到请求中

在编写代码后添加以下内容：

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


Update：构建ajax调用后，
onclick
事件似乎会运行。为了解决这个问题，可以使用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调用之前运行click并附加右边的

页面

值，将侦听器添加到实际的链接元素，而不是父按钮

将

a

添加到选择器：

.paginate_按钮。首先：不（.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);
        });

---

数据表在请求正文中发送

start

和

length

，我认为使用它更容易，不需要比较

page

是什么和分类器代码。例如，

pageLength

为50，单击

next

或

page2

后，DataTables将发送body

start:50，length:50

，您的查询如下

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

但是如果要使用该

页面

，在

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()
  })
},

---

一段时间后，我找到了解决这种情况的办法。也许这不是最好的方法，但它确实起到了作用

$(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"},
                {"data":"address"},
                {"data":"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;
            } );

});

---

你的主要问题是什么？您有jquery分页问题吗？或者sql分页问题？数据：在服务器端是什么样子的，特别是data.page？另外，在页面更改后，似乎需要重新绑定数据集。@kumarHarsh我的主要问题是，我无法将更新后的页面变量发送到服务器，该服务器应根据用户在此页面中的选择发送“第一”、“上一”、“下一”和“最后一个”。例如，第一次加载后，如果用户在分页时单击“下一步”按钮，则应使用

next

valuse更新此页面变量，并将其发送给server@RossBush响应数据中填充了从表中获取的所有数据的列表，但并没有任何数据迹象。page@RossBush请查看更新2

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

$(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"},
                {"data":"address"},
                {"data":"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;
            } );

});