时间戳

首页 > 解决方案 > 数据表中列的二级排序

datatables - 数据表中列的二级排序

问题描述

正如您从下面的屏幕截图中看到的那样，我有一个数据表，其中显示了两个相关但完全不同的数据位，即平均分数和评分数：

截屏

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

我在考虑如何修改 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>

标签： datatablesdatatables-1.10

解决方案

您可以为您感兴趣的列定义自定义排序功能。

片段：

$('#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>

推荐阅读