分享程序员开发的那些事...
更新时间：2023-12-04 11:31:22
在您获得表中的最后一个条目(从用户角度来看，这看起来很尴尬)时，我是否建议您不要隐藏删除"按钮.禁用它?
May I recommend not to hide 'delete' button, when you got the last entry in your table (which will look awkward, from user standpoint), but rather to disable that?
这是我的观点的例子(我敢肯定，您会理解的):
Here's the example of my point (I'm sure, you'll grasp the idea):
//table data
const srcData = [
{name: 'apple', category: 'fruit'},
{name: 'banana', category: 'fruit'},
{name: 'carrot', category: 'vegie'},
{name: 'pineapple', category: 'fruit'},
{name: 'kiwi', category: 'fruit'},
];
//table initialization
const dataTable = $('#mytable').DataTable({
sDom: 'tp',
data: srcData,
ordering: false,
pageLength:3,
drawCallback: () => {
const table = $('#mytable').DataTable();
$(table.row(table.rows(':last')).node()).find('button').remove();
},
columns: [
{title: 'Name', data: 'name'},
{
title: 'Category',
data: 'category',
render: data => data+'<button class="del">x</button>'},
]
});
//'delete' button callback
$('#mytable').on('click', 'td button', function(){
dataTable.row($(this).closest('tr')).remove().draw();
});
tbody td button {float:right}
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>