javascript - <thead> 元素中的数据表排序和过滤

Question

我正在使用Datatables对我拥有的数据表进行排序/过滤。我希望能够在标题中对两者进行排序和过滤，但是，单击过滤器会使表排序，然后过滤器选择不会保持打开状态。

我这里有一个演示:http://codepen.io/jasonflaherty/pen/xOdqVV使用这种类型的想法:

<thead>
    <tr>
      <th><span class="header">Name</span><span class="filter"></span></th>
      <th><span class="header">Position</span><span class="filter"></span></th>
      <th><span class="header">Office</span><span class="filter"></span></th>
      <th><span class="header">Age</span><span class="filter"></span></th>
      <th><span class="header">Start date</span><span class="filter"></span></th>
      <th><span class="header">Salary</span><span class="filter"></span></th>
    </tr>
  </thead>

有没有办法让 bSort 单击整个 th 元素并使其仅在 class="header"上工作？

Answer 1

您可以使用 .off 函数删除 click事件来自<th>标签。然后向您想要的元素添加新的事件处理程序，在该事件处理程序中，您可以调用 DataTables API columns().order() .

根据您的代码，在要选择的附加选项之后添加此内容:

// your code
column.data().unique().sort().each(function(d, j) {
  select.append('<option value="' + d + '">' + d + '</option>')
});

// new code here
// remove original event handler
$(column.header()).off('click');

// register new event handler
$(column.header()).on('click', function(e) {
  // check click target is "<span class='header'>...</span>" or not
  if (e.target.nodeName !== 'SPAN' || !$(e.target).hasClass('header'))
    return;

  // call DataTables API to sort this column and redraw this table
  column
    .order($(this).hasClass('sorting_desc') ? 'asc' : 'desc')
    .draw();
});

注意:如果您只想<select>标签不触发排序事件。您可以添加 click事件处理程序至 <select>停止事件冒泡的元素。

例如:

var select = $('<select><option value=""></option></select>')
  .appendTo($(column.header()).find('span.filter').empty())
  .on({
    'change': function() {
      // Do something
    },
    'click': function(e) {
      // stop click event bubbling
      e.stopPropagation();
    }
  });

希望这有用。