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而不是{{1 }}。 这看起来像是先发送ajax请求，然后再更新页面值。现在，我只需要解决此问题就意味着需要在发送Ajax之前先更新页面值。

previous

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 ja ontouchstart个事件。它们应在默认的onclick事件之前运行

使用mousedown和touchstart替换所有单击的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);
        });

Answer 2

DataTable在请求正文中发送start和length，我认为使用它更容易，无需比较page是什么和排序器代码。例如pageLength是50，然后单击next或page 2，则DataTables将发送正文start: 50, length: 50，您的查询就像

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

但是，如果您想使用该page，则可以在beforeSend()函数中，如果尚未触发按钮的click事件，则可以尝试中止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()
  })
},

Answer 3

一段时间后，我发现了这种情况的解决方法。可能不是最好的方法，但确实可以。

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

});

如何检测在数据表的完整页面调度类型中单击的第一个，上一个，下一个，最后一个按钮

更新：

3 个答案: