问题描述
目标：
当您使用 ASC 或 DESC 时，任何不包含任何数据（空或空白）的单元格都应始终位于表的底部。
它应该发生在特定的列上，其余的列不应该受到影响。
特定列是“名称”
问题：
我不知道该怎么做，是否可以与此 Cloudtables 相关联？
贾斌：
https://jsbin.com/jacewudaji/edit?html,outpout
谢谢！
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script>
var data = [
[
null,"System Architect","Edinburgh","5421","2011/04/25","$3,120"
],[
"Jim Winters","Director","8422","2011/07/25","$5,300"
],[
"Garrett Winters",""
],[
"",[
"Jim West",[
"Sandra brown",""
]
]
$( document ).ready(function() {
console.log( "ready!" );
});
$('#example').DataTable( {
data: data,"columnDefs": [ {
"targets": 0,type: 'sortme'
} ]
} );
$.fn.dataTable.ext.type.order['sortme-asc'] = function ( a) {
// sorting logic here
};
$.fn.dataTable.ext.type.order['sortme-desc'] = function ( a) {
// sorting logic here
};
</script>
</body>
</html>
解决方法
您可以按如下方式使用 $.fn.dataTable.ext.type.order：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Custom Sort</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script>
var data = [
[
"Jim Winters","Director","Edinburgh","8422","2011/07/25","$5,300"
],[
null,"System Architect","5421","2011/04/25","$3,120"
],[
"Garrett Winters",""
],[
"",[
"Jim West",[
"Sandra Brown",""
]
]
$( document ).ready(function() {
console.log( "ready!" );
$.extend( $.fn.dataTable.ext.type.order,{
"sortme-asc": function ( a,b ) {
let x = formatAsc( a );
let y = formatAsc( b );
return (x < y) ? -1 : ((x > y) ? 1 : 0);
},"sortme-desc": function ( a,b ) {
let x = formatDesc( a );
let y = formatDesc( b );
return (x < y) ? 1 : ((x > y) ? -1 : 0);
}
} );
$('#example').DataTable( {
"data": data,"columnDefs": [ {
"targets": 0,"type": 'sortme'
} ]
} );
function formatAsc( z ) {
return z && z.trim() !== '' ? z : '~~~'; // choose whatever you prefer here
}
function formatDesc( z ) {
return z && z.trim() !== '' ? z : ''; // choose whatever you prefer here
}
});
</script>
</body>
</html>这使用两个函数（一个用于 asc，另一个用于 desc）为 null 和空字符串值提供替换值。您可以使用任何您想要的文本值，以确保列中的所有内容都将在您选择在这些函数中使用的字符串之前/之后进行排序。
这里有一个问题：
初始显示不会触发自定义排序 - 不幸的是，我还没有（还？）找到解决方法。我试过 initComplete，但没有用。如果我找到该部分的解决方案，我会更新。
更新：
在我的原始代码片段中，我将 $('#example').DataTable( {...} 代码置于 $.extend( $.fn.dataTable.ext.type.order,{...}) 代码之前。我交换了它们，以便顺序功能首先出现，因此可用于初始显示排序顺序。