数据表排序箭头功能

Question

我正在使用DataTables，它的工作非常出色。现在，当您单击列标题（标题上的任何位置）时，它会进行排序。并且在升序和降序之间切换。但现在的请求是有两个不同的按钮，一个按升序排序，另一个按升序排序，而不是整个标题是主动触发。

我是否必须附加到每个标题并添加我自己的按钮，或者是否存在我缺少的数据表中的内容。

如果我必须添加自己的按钮，我喜欢被指向正确的方向。

万分感谢！

Answer 1

如果这里的要点只是改变排序的默认图标，你可以只覆盖这个类

.sorting_asc {
  background: url("my_custom_image_asc") no-repeat scroll right center transparent;
}

.sorting_desc {
  background: url("my_custom_image_desc") no-repeat scroll right center transparent;
}

Answer 2

不幸的是，在jquery dataTables中没有内置功能。但它很容易实现。以下是步骤：

1 ）删除默认标题图标，在1.10.x中使用此CSS

table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
    background: none;
}

2 ）删除空白字体包裹和丑陋的轮廓

th {
  white-space: nowrap;
  outline: none;
}

3 ）创建一个用于设置按钮样式的类

.sort-btn {
   padding: 0px;
   float: right;
   font-size: 10px;
}

4 ）初始化dataTable后，循环浏览<th>＆＃39}。对于每个，取消绑定默认点击事件，添加.asc和.desc按钮，并为每个按钮注入事件以对列进行升序或降序排序：

$('#example th').each(function(index, th) {
  $(th).unbind('click');
  $(th).append('<button class="sort-btn btn-asc">&#9650;</button>');
  $(th).append('<button class="sort-btn btn-desc">&#9660;</button>');

  $(th).find('.btn-asc').click(function() {
     table.column(index).order('asc').draw();
  }); 
  $(th).find('.btn-desc').click(function() {
     table.column(index).order('desc').draw();      
  }); 
});    

5 ）结果如下所示：

演示 - ＆gt; http://jsfiddle.net/wyLzgjv5/