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

Posted 2023-05-09

【中文标题】当用户点击数据表中的分页页码时如何触发点击事件？

【英文标题】：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)')

【参考方案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 等按钮时，只需要出现警报，而无需导航到下一个数据页面。 ?