javascript - 如何检测在数据表中的完整分页类型中单击的第一个、上一个、下一个、最后一个按钮

Question

可以直接进入UPDATE 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 上看到不同的 id，例如

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

Answer 1

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

在编码后添加:

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

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

更新:onclick 事件似乎在构建 ajax 调用之后运行。要解决此问题，可以改用 onmousedown 和 ontouchstart 事件。它们应该在默认的 onclick 事件之前运行

用 mousedown 和 touchstart 替换所有 click jQuery 事件:

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