DataTables js 没有正确排序字符串答案

【问题标题】：DataTables js didn't sort strings correctDataTables js 没有正确排序字符串
【发布时间】：2020-03-30 18:12:52
【问题描述】：

我在 jquery 3.3.1 中使用最新的 DataTables.js。

这是表数据结构

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 100 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
        <tr>
            <td>Row 11 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

应该对第 1 行进行排序

to row 1, row 11, row 100
or row 100, row 11, row 1

但确实如此

row 1, row 100, row 11

或

row 11, row 100, row 1

这是 javascript 中的正常排序行为，什么也不正确。

有什么想法吗？

【问题讨论】：

当然，您的行已按词法（按字母顺序）排序。如果您要附加您的 jQuery 代码，我可能会建议您更改哪些内容来修复它。
你的javascript代码是什么？
您似乎想根据嵌入在某些文本中的数值进行排序。这看起来与这个问题非常相似：Datatables sorting - how to ignore text in column?。这有帮助吗？
我使用 Datatables js 示例中的默认设置。所以它只是jquery加载函数调用。请看我的回答。

标签： javascript sorting datatables

【解决方案1】：

在列定义中设置 type="textNum" 然后使用jquery.extend jQuery.extend( jQuery.fn.dataTableExt.oSort,{//comparator function})实现自定义排序

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "textNum-asc": function ( a, b ) {
        return a.match(/\s*\d*\s/)[0]- b.match(/\s*\d*\s/)[0]
    },
    "textNum-desc": function ( a, b ) {
       return b.match(/\s*\d*\s/)[0]- a.match(/\s*\d*\s/)[0]
    }
});

运行以下 sn -p

$("#table_id").dataTable({
"columnDefs": [
    { type: 'textNum',"targets": 0 },
    { type: 'textNum',"targets": 1 },
  ]
})
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "textNum-asc": function ( a, b ) {
       //regex will match first number i.e number to right of row
        return a.match(/\s*\d*\s/)[0]- b.match(/\s*\d*\s/)[0] 
    },
    "textNum-desc": function ( a, b ) {
       return b.match(/\s*\d*\s/)[0]- a.match(/\s*\d*\s/)[0]
    }
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 6 Data 1</td>
            <td>Row 4 Data 2</td>
        </tr>
         <tr>
            <td>Row 3 Data 1</td>
            <td>Row 7 Data 2</td>
        </tr>
        <tr>
            <td>Row 10 Data 1</td>
            <td>Row 0 Data 2</td>
        </tr>
         <tr>
            <td>Row 1 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
        <tr>
            <td>Row 11 Data 1</td>
            <td>Row 3 Data 2</td>
        </tr>
    </tbody>
</table>

【讨论】：

感谢 Supercool，但我使用 Vanilla JS.. 你只需要不到 15 行代码就可以正确排序并保持索引。
你在问题名称中说“在数据表 jquery 中排序”这就是我回答这个答案的原因
在原版 js 中你可以使用 c.sort(function(a,b) { return a.split("\s")[1]-b.split("\s")[ 1] } 只有一行

【解决方案2】：

我正在查看 DataTables js 如何排序示例

row 1, row 100, row 11

现在，我希望我找到了一个好的解决方案，并且还使用原生 JavaScript 开发了一些 DataTable。

这里喜欢源代码： https://github.com/chrobaks/netcodev-datatable

在这里你可以找到一个演示： https://www.netcodev.de/datatable/

【讨论】：