如何在Datatable中检测完全分页类型中的第一个,上一个,下一个,最后一个按钮

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

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

在编码后添加以下内容：

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

preXhrAjax 事件 - 在发出 Ajax 请求之前触发。

更新：onclick事件似乎在 ajax 调用构建后运行。为了解决这个问题，可以使用onmousedownja events 来代替。ontouchstart它们应该在默认值之前运行onclick事件之前运行

将所有点击 jQuery 事件替换为 mousedown 和 touchstart：

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