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点击整个元素，让它只适用于一个类=＆＃34;标题＆＃34;例如？

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

希望这很有用。

数据表在元素中排序和过滤

1 个答案: