使不可显示的数据出现在表格的底部
Posted
技术标签:
【中文标题】使不可显示的数据出现在表格的底部【英文标题】：Make non displayable data to appear in the bottom of the table 【发布时间】：2021-09-05 11:45:33 【问题描述】：目标： 当您使用 ASC 或 DESC 时，任何不包含任何数据（null 或 whitepsace）的单元格应始终位于表格的底部。 它应该发生在特定列上，并且其余列不应该受到影响。 具体列是“名称”
问题： 我不知道该怎么做，是否有可能与这个 Cloudtables 相关？
Jsbin: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",
"Edinburgh",
"8422",
"2011/07/25",
"$5,300"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
""
],
[
"",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
""
],
[
"Jim West",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
""
],
[
"Sandra Brown",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
""
]
]
$( 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>
【问题讨论】：
如果你真的想在底部保留空的命名单元格并且仍然允许对所有列进行排序，你应该考虑将这些空单元格放到另一个表中。覆盖排序模式没有意义（对我来说） 【参考方案1】：你可以使用$.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",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
""
],
[
"",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
""
],
[
"Jim West",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
""
],
[
"Sandra Brown",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
""
]
]
$( 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，但没用。如果我找到该部分的解决方案，我会更新。
更新：
在我的原始代码 sn-p 中，我将 $('#example').DataTable( ... 代码放在 $.extend( $.fn.dataTable.ext.type.order, ...) 代码之前。我交换了它们，以便 order 函数首先出现，因此可用于初始显示排序顺序。
【讨论】：
以上是关于使不可显示的数据出现在表格的底部的主要内容，如果未能解决你的问题，请参考以下文章