sorting - 数据表排序箭头功能

Question

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

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

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

太感谢了！

Answer 1

不幸的是，在 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 ) 初始化数据表后，循环遍历<th>'s. 对于每个，取消绑定默认单击事件，添加.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 ) 结果如下所示：

演示-> http://jsfiddle.net/wyLzgjv5/

Answer 2

好吧，如果这里的重点只是更改用于排序的默认图标，您可以覆盖这些类

.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;
}