javascript - 将两个排序图标添加到数据表列？

Question

假设我的数据表列之一类似于“车辆制造/型号”，值的格式类似于“丰田
凯美瑞”。

从表面上看，如果它们是两列会更好，但我的屏幕空间有限，我宁愿人们垂直滚动而不是水平滚动。

现在我已经通过执行 'columnDefs': [{orderable: false, target: x}] 禁用了对“Vehicle Make/Model”列的排序，但我想要做的是让它看起来更像这样:

车辆品牌 ↕/型号 ↕

例如。一列，其中包含两个可排序的小部件。

图像本身是 images/sort_both.png(或 sort_asc.png 或 sort_desc.png)，但仅仅因为图像在那里并不能使其可排序..

有什么想法吗？

谢谢!

Answer 1

您必须将其拆分为两个数组以分别对其进行排序，并且由于您使用的是数据表，因此最好事先进行，并为自己设置两列。

修复源数据

如果您无法控制源数据的格式，那么您可能就不走运了。 考虑一下，在以下情况下，您会在哪里拆分结果:

Make          Model         Your Make/Model Column

Hyundai       Santa Fe      Hyundai Santa Fe
Alfa Romeo    Giulietta     Alfa Romeo Giulietta

设置列的样式

然后，您可以有 3 列:Make、Model、Make/Model。 只需在 Make 和 Model 上设置 display:none，但将它们用于排序。

对隐藏的列进行排序

var modelSortAsc = true;

$('#modelColumnLink').click(function(){
    var sort = (modelSortAsc)? "asc" : "desc";
    modelSortAsc = !modelSortAsc;
    DataTable( {
        "order": [[ 4, sort ]]
    } );
});