javascript - 使不可显示的数据出现在表格的底部
问题描述
目标:
当您使用 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>
解决方案
您可以$.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>
这使用两个函数(一个 forasc
和一个 for )为空字符串值desc
提供替换值。null
您可以使用所需的任何文本值,以确保列中的所有内容都将在您选择在这些函数中使用的字符串之前/之后进行排序。
这有一个问题:
初始显示不会触发自定义排序 - 不幸的是,我还没有(还没有?)找到解决方法。我试过initComplete
了,但没有奏效。如果我找到该部分的解决方案,我会更新。
更新:
在我的原始代码片段中,我将$('#example').DataTable( {...}
代码放在代码之前$.extend( $.fn.dataTable.ext.type.order, {...})
。我交换了它们,以便顺序功能首先出现,因此可用于初始显示排序顺序。
推荐阅读
- pytest-html - 如何使用断言错误自定义详细信息,例如使用 pytest-html 在详细信息中添加 html 表?
- java - 如何在 SpringBoot 中从 MongoDb 中仅读取特定的 JSON 节点
- couchbase - couchbase-cli:找不到命令
- flutter - 如何在 Android Studio Flutter 项目中启用小部件布局提示和代码生成?
- postgresql - 使用 github.com/mgutz/dat 库运行示例脚本
- reactjs - 如何从子组件定位父组件
- php - Laravel 收银员:Stripe\Exception\InvalidRequestException 没有这样的客户:cus_H0zcimyzC93Bay
- phpmyadmin - phpMyAdmin 要求登录
- javascript - 无法使用 Firebase 从 React Native 中的数据库中获取?
- curl - Tar 压缩命令输出到 curl