我试图只添加用于排序的自定义代码，同时单击表。我为它添加了一个点击事件，如:
$div.find('table').on('click', 'thead th', async function () {
doSearch();
});
但它似乎先通过默认代码对表进行排序，然后使用我的自定义代码进行排序。如何禁用默认代码?
这样做的一个DataTables方法是使用$.fn.dataTable.ext.type.order对象，如下所示:
- 决定要为自定义排序"类型"使用的名称。例如:
my-custom-sort。这就是你如何区分你的排序函数和其他各种内置的排序函数，这些函数是由DataTables提供的，或者是通过插件添加的。
这是避免使用默认排序函数的方法。
- 使用"type"名称，并将其附加到需要以自定义方式排序的相关列上-例如:
columnDefs: [
{ "type": "my-custom-sort", targets: "_all" }
]
在上面的例子中，我将这个类型名应用到表中的每一列。
- 添加你的"type"到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后缀。这允许我们执行不同版本的自定义排序，这取决于需要对数据进行排序的方式。
这些是预定义的后缀，可以被数据表识别。
- 提供您的排序函数-可以直接在上述匿名函数中，也可以单独提供。要做到这一点，您需要提供返回以下内容之一的代码:
- 一个正值
- 为负值
- 0
您根据两个输入值val_1和val_2计算此返回值，这两个输入值表示正在排序的列中的一对值。
澄清第(4)点:datattables将排序委托给JavaScriptsort()函数。你可以在该文档中阅读完整的细节。
这是一个非常基本的例子。它所做的只是颠倒了"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>