数据表中列的二级排序答案

【问题标题】：Secondary Ordering for Column in Datatables数据表中列的二级排序
【发布时间】：2021-02-05 16:16:55
【问题描述】：

从下面的屏幕截图中可以看出，我有一个数据表，其中显示了两个相关但完全不同的数据位，即平均得分和评分数：

在按此列排序时，如果我可以先按平均得分（数字）排序，然后按评分数排序（数字），但也将它们显示在单个列中，那将是首选。

我正在考虑如何修改 data-order 属性的值来操作一个东西，但我想不出任何解决方案。

其他人解决了这个问题。

数据单元格如下所示：

<td class="text-center sorting_1" data-search="-1" data-order="5.00">

  <div class="mb-2">            

  <span class="badge badge-success">            
    5.00
  </span>

  </div>

  <small class="text-muted">
    10 ratings
  </small>
             
</td>

【问题讨论】：

一种方法：您可以为此使用orderData 选项。例如，将两个hidden 列添加到您的表中 - 一个包含平均分数数字，一个包含评分数字。然后使用orderData 将搜索顺序从您的可见列委托给这些隐藏列。你可以看到一个基本的例子here。 - 除了你的情况，你有 2 个目标列，而不是 1 个。

标签： datatables datatables-1.10

【解决方案1】：

您可以为您感兴趣的列定义自定义排序函数。

sn-p：

$('#example').DataTable({
    "aoColumns": [{
        "bSortable": true}, {"bSortable": true}, {"sType": "customAvgScoreSort", "bSortable": true}]
});

// custom sorting.......
jQuery.fn.dataTableExt.oSort["customAvgScoreSort-desc"] = function (x, y) {
    return parseFloat($(y).find('span').text()) - parseFloat($(x).find('span').text()) || parseInt($(y).siblings('small').text()) - parseInt($(x).siblings('small').text());
};

jQuery.fn.dataTableExt.oSort["customAvgScoreSort-asc"] = function (x, y) {
    return parseFloat($(x).find('span').text()) - parseFloat($(y).find('span').text()) || parseInt($(x).siblings('small').text()) - parseInt($(y).siblings('small').text());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
    <thead>
    <tr>
        <th>Type</th>
        <th>Unique deals</th>
        <th>AVG score</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Sales development</td>
        <td>0</td>
        <td>
            <div class="mb-2">
                <span class="badge badge-success">
                    5.0
                </span>
            </div>
            <small class="text-muted">
                2 ratings
            </small>
        </td>
    </tr>
    <tr>
        <td>Sales development</td>
        <td>0</td>
        <td>
            <div class="mb-2">
                <span class="badge badge-success">
                    5.0
                </span>
            </div>
            <small class="text-muted">
                1 ratings
            </small>
        </td>
    </tr>
    <tr>
        <td>Sales development</td>
        <td>0</td>
        <td>
            <div class="mb-2">
                <span class="badge badge-success">
                    5.0
                </span>
            </div>
            <small class="text-muted">
                10 ratings
            </small>
        </td>
    </tr>
    <tr>
        <td>Sales development</td>
        <td>0</td>
        <td>
            <div class="mb-2">
                <span class="badge badge-success">
                    5.0
                </span>
            </div>
            <small class="text-muted">
                3 ratings
            </small>
        </td>
    </tr>
    </tbody>
</table>

【讨论】：