jquery - 如何使用 DataTables 添加自定义查看更多详细信息按钮?
问题描述
您如何在 DataTables 中自定义查看更多详细信息按钮?是的,我知道 DataTables 已经有一个查看更多详细信息按钮,但我想要一个定制设计的按钮。
我希望在单击自定义视图更多按钮时显示子行。
这是我一直在尝试使用的代码,使用“.table-toggle”作为类名来激活它到我应用这个类名的任何地方。
以下是脚本:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/r-2.2.3/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/r-2.2.3/datatables.min.js"></script>
这是我的 HTML 代码:
<table class="table">
<thead>
<tr>
<th class="never">ID</th>
<th>Category</th>
<th>Amount</th>
<th class="none">Date</th>
<th class="desktop">Time</th>
<th class="desktop">Balance </th>
<th class="none">Payment Type</th>
<th class="none">Note</th>
<th class="desktop">Action</th>
</tr>
</thead>
<tbody>
<tr class="table-toggle">
<td>1</td>
<td>
<h5>Charles Smith</h5>
<span>Lending</span>
</td>
<td>
-$500.00
</td>
<td>02-January-2020</td>
<td></i> 11:01 am </td>
<td>$67,256.00</td>
<td>Cash</td>
<td>Collected and deposited</td>
<td>
<a href="javascript:void(0)" class="table-toggle">View More</a>
<a href="javascript:void(0)"></a>Edit</span>
<a href="javascript:void(0)"></a>Delete</span>
</td>
</tr>
</tbody>
</table>
这是我的 Javascript 代码:
<script>
// Add event listener for opening and closing details
$('.table tbody').on('click', '.table-toggle', function () {
var tr = $(this).closest('tr');
var table = $('.table').DataTable();
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
</script>
这是我在按钮上的 HTML 代码
<a href="javascript:void(0)" class="table-toggle">View More</a>
解决方案
<script>
// Add event listener for opening and closing details
$('.table').on('click', '.table-toggle', function () {
var table = $('.table').DataTable();
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
});
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d[0]+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d[1]+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
</script>
好的,我得到了工作的代码。如果您将类“.table-toggle”放在任何对象上,它将起作用。如果您将按钮放在表格行中,然后单击该按钮,它将触发两次。一火为 ,tr
另一火为td
。所以记住这一点。
<tr class=".table-toggle">
<td><a href="javascript:void(0)" class="table-toggle">View More</a></td>
</tr>
如果要格式化子表中显示的内容,可以使用链接或参考。Child Details 示例使用该format()
函数作为构建 HTMl 的一种方式,该 HTMl 将显示您的子行。您可以使用任何您想要的有效 HTML,并仅显示您想要的行数据部分。https://datatables.net/examples/api/row_details.html
这就是您的格式代码将如何替换上面的行:
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
此链接显示了一种进行格式化的好方法: DataTables - Expand Child details without using Ajax
推荐阅读
- xonsh - 在 Xonsh 中显示函数定义的命令是什么?
- javascript - 按 ID 从表和 localStorage 中清除数据。使用按钮
- singularity-container - 如何启动奇点图像的几个可写实例
- javascript - Vue.js 从数组中删除对象不起作用
- python - vscode 输入重定向无法正常工作
- oracle - Intellij - 春季启动 - 行家
- python - python中的排序嵌套列表不起作用
- scheme - 方案在列表的列表中添加奇数元素
- php - 微服务方法中的共享常量?
- c++ - 尝试将变量传递给构造函数 C++ 时出现分段错误