javascript - 再次绑定(bind)点击按钮的排序功能

Question

首先，我可以禁用表头中的排序

$("button.disable-sorting").click(function(){
    $("table thead th").off("click.DT");
});

现在我的问题是如何绑定(bind)表头的排序，我试过了

$("button.restore-sorting").click(function(){
    $("table thead th").bind("click.DT");
});

但似乎不起作用。关于如何绑定(bind)数据表表头的排序功能的任何帮助想法？

PS:我在 DataTables 1.10.12 上

Answer 1

我会在初始化后立即存储原始事件监听器。在下面的示例中，我保留了第一个 <th> 的所有事件。通过将它们保存到数组映射 events :

var table = $('#example').DataTable({
  initComplete: function() {
    $.each($._data($('#example thead th')[0], 'events'), function(name, obj) {
      events[name] = obj[0]
    })
  }
})  

现在您在表单上有了“ native ”dataTables 事件的映射

events['click'] => old event handler
events['keypress'] => old event handler
...

然后为特定标题(或所有标题)打开和关闭排序(和其他 dataTables 事件驱动的功能)真的很简单。这是一个带有禁用/启用按钮的小演示:

//remove original event listeners, add alternative 
$("#disable").click(function() {
 $("#example thead th:nth-child(1)")
   .unbind()
   .bind('click', function() { 
      alert('all listeners removed')
   })
})  
//restore any original event 
$("#enable").click(function() {
  var $th = $("#example thead th:nth-child(1)")
  $th.unbind()
  for (var name in events) {
    $th.bind(name, events[name])
  }
})  

演示 -> http://jsfiddle.net/8sbcage4/ (禁用/启用第一个 header 的数据表事件)