当用户点击数据表中的分页页码时如何触发点击事件？答案

【问题标题】：How to trigger on click event when user clicks on pagination page numbers in datatables?当用户点击数据表中的分页页码时如何触发点击事件？
【发布时间】：2017-12-10 02:57:47
【问题描述】：

我正在使用数据表，当用户单击数据表分页号时，我希望在其中触发带有警报框的点击事件。

以下是我尝试过的代码，但它适用于下一个按钮。

$(document).ready(function (){
  var table = $('#example').DataTable({
    drawCallback: function(){
      $('.paginate_button.next', this.api().table().container())          
         .on('click', function(){
            alert('next') ;
         });       
    }
  });   
});

Live Example

【问题讨论】：

你的意思是当用户点击一个分页按钮时你想显示一个警报？ “触发器”与处理事件相反。
我不确定问题出在哪里，您通过使用此选择器$('.paginate_button.next') 获得下一个按钮，获取页面按钮，不要限制为.next，使用@987654324 @ 或者，如果你不想要下一个：$('.paginate_button:not(.next)')

标签： javascript jquery pagination datatables

【解决方案1】：

必须考虑的问题：

分页按钮是反复生成的，所以需要一个委托的事件处理程序
dataTables 抑制或取消点击事件（不知道为什么，这里已经发出了好几次了）
您需要一个选择器来排除下一个和上一个按钮

我会这样做：

$('.dataTables_wrapper').on('mousedown touchstart', '.paginate_button:not(.previous):not(.next)', function() {
  alert('something')
})

http://jsfiddle.net/0f9Ljfjr/943/

更新。每次绘制后禁用上一个/下一个按钮，包括禁用功能：

var table = $('#example').DataTable({
   ...
   drawCallback: function() {
     $('.paginate_button.next').addClass('disabled').unbind();
     $('.paginate_button.previous').addClass('disabled').unbind();
   }
})

【讨论】：

我可以将上一个和下一个按钮设置为禁用状态吗？
@SamaraSsr，查看更新，如果按钮仍需要可反应，您可以跳过最后一个unbind()...想知道为什么要这样做...？
我们在我们的网站上提供了 8 种类型的献血者名单。我们不想让用户完全访问查看所有捐赠者列表，以便与他们取得联系并通过 from 收集他们的详细信息。我用引导模式替换了警报。他们将不得不联系我们以获取我们网站上提供的更多捐助者名单。感谢您在这方面的帮助:)
为什么这在移动设备上不起作用？在小屏幕上，当我点击分页数字时，它会显示警报窗口，但是在关闭警报后它会转到下一页！
@SamaraSsr，我不知道，没见过这个。尝试防止事件冒泡：将e 添加到mousedown 处理程序并在alert() 之前执行e.stopPropagation()

【解决方案2】：

试试这个

 $(document).ready(function (){
    var table = $('#example').DataTable({
       drawCallback: function(){
          $('.paginate_button', this.api().table().container())          
             .on('click', function(){
                alert('next') ;
             });       
       }
    });   
}

只需删除 .next

【讨论】：

我想阻止分页数字的默认操作。当用户单击 2 或 3 等按钮时，只需要出现警报，而无需导航到下一个数据页面。 ?