数据表排序箭头功能

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中没有内置的功能。但它很容易实现。以下是步骤：

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

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>，对于每个按钮，解绑默认的click事件，添加.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)结果如下：

​

演示->