DataTables.net 如何仅使用自定义代码订购答案

【问题标题】：DataTables.net how to order only with custom codeDataTables.net 如何仅使用自定义代码订购
【发布时间】：2021-11-01 20:19:53
【问题描述】：

我正在尝试仅添加自定义代码以进行订购，同时单击表格。我为此添加了一个点击事件：

$div.find('table').on('click', 'thead th', async function () {                               
    doSearch();                
});

但它似乎先按默认代码订购表格，然后用我的自定义代码订购。如何禁用默认代码？

【问题讨论】：

能否请您添加完整的表格代码？
这只是第一个示例中来自 DataTable.net 的示例表。 (初始化为：$('#example').DataTable();)
@iakwvina 你看到datatables.net/examples/basic_init/table_sorting.html 了吗？ 使用 DataTables，您可以在初始化时更改表的排序特征。使用order 初始化参数，您可以设置表格以完全按照您想要的顺序显示数据。
我还发现了这个：datatables.net/forums/discussion/32899/override-order-function
@iakwvina 请编辑您的帖子并包含一个最小的、可重复的示例：stackoverflow.com/help/minimal-reproducible-example

标签： jquery sorting datatables

【解决方案1】：

执行此操作的一种 DataTables 方法是使用 $.fn.dataTable.ext.type.order 对象，如下所示：

确定您要用于自定义排序“类型”的名称。例如，my-custom-sort。这就是您将排序函数与 DataTables 提供的或可能通过插件添加的各种其他内置排序函数区分开来的方式。

这是避免使用默认排序功能的方法。

在您的 DataTable 定义中使用该“类型”名称并将其附加到需要以您的自定义方式排序的相关列 - 例如：

columnDefs: [
  { "type": "my-custom-sort", targets: "_all" }
]

在上面的示例中，我已将此类型名称应用于表中的每一列。

将您的“类型”添加到 DataTables $.fn.dataTable.ext.type.order 对象，这是存储不同排序“类型”集合的位置：

$.extend( $.fn.dataTable.ext.type.order, {
  "my-custom-sort-asc": function (val_1, val_2) {
    // your sorting code here - or a call to a function
  }
} );

$.extend( $.fn.dataTable.ext.type.order, {
  "my-custom-sort-desc": function (val_1, val_2) {
    // your sorting code here - or a call to a function
  }
} );

在上面的代码中，我实际上添加了两个条目，将-asc 和-desc 后缀添加到我的自定义类型名称中。这允许我们执行不同版本的自定义排序，具体取决于需要对数据进行排序的方式。

这些是预定义的后缀，可以被数据表识别。

提供您的排序函数 - 直接在上述匿名函数中，或单独提供。为此，您需要提供返回以下内容之一的代码：

一个正值
负值
零

您根据两个输入值 val_1 和 val_2 计算此返回值，这两个输入值表示正在排序的列中的一对值。

澄清第 (4) 点：DataTables 将排序委托给 JavaScript sort() function。您可以阅读该文档中的完整详细信息。

这是一个非常基本的例子。它所做的只是颠倒“asc”和“desc”的含义：

var dataSet = [
    {
      "id": "123",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh"
    },
    {
      "id": "456",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York"
    }
  ];

$(document).ready(function() {

  $.extend( $.fn.dataTable.ext.type.order, {

    "my-custom-sort-asc": function ( val_1, val_2 ) {
      if (val_1 < val_2) {
        return 1;
      } else if (val_1 > val_2) {
        return -1;
      } else {
        return 0;
      }
    },

    "my-custom-sort-desc": function ( val_1, val_2 ) {
      if (val_1 < val_2) {
        return -1;
      } else if (val_1 > val_2) {
        return 1;
      } else {
        return 0;
      }
    }

  } );

var table = $('#example').DataTable( {
  data: dataSet,
  columns: [
    { title: "ID", data: "id" },
    { title: "Name", data: "name" },
    { title: "Office", data: "office" },
    { title: "Position", data: "position" },
    { title: "Start date", data: "start_date" },
    { title: "Salary", data: "salary" }
  ],
  columnDefs: [
    { "type": "my-custom-sort", targets: "_all" }
  ]

} ); 

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
    </table>

</div>



</body>
</html>

【讨论】：