javascript - 如何使用数据表在按钮单击时显示带有列数据的确认模态
问题描述
有了下面的数据表,我想在单击按钮时显示一个动态弹出窗口或模式,这将用作确认模式。
@section scripts
{
<script>
$(document).ready(function() {
var table = $('#visitorsTable').DataTable({
"ajax": {
...
},
"columns": [
{ "data": "FirstName" },
{ "data": "LastName" },
{ "data": "Email" },
{ "data": "PhoneNumber" },
{ "data": "WifiCode" },
],
columnDefs: [
{
targets: [4],
render: function(wifiCode, b, data, d) {
if (wifiCode) {
var content = '<span>' + wifiCode + '</span>';
if (data.Email && data.PhoneNumber) {
content +=
'<button type="button" class="btnResendByMail>Email</button>'
return content;
}
}
}
]
});
$(document).on('click',
'.btnResendByMail',
function() {
$.ajax({
....
});
});
});
</script>
}
我在 DataTables 网站上看到了“响应式”插件。
但是,在他们的示例中,总是通过单击第一列触发模式,并且它们显示该行的所有数据,而不是特定列。
任何想法 ?
解决方案
...如果我正确地回答了您的问题,我相信,这就是您要实现的目标:
srcData = [
{name: 'Albert', lastname: 'Einstein', email: 'emc2@gmail.com', code: 'XOIUE#WL'},
{name: 'Nikola', lastname: 'Tesla', email: 'firebolt@hotmail.com', code: 'OUWelks'},
{name: 'Rudolf', lastname: 'Hertz', email: 'radiohead@yahoo.com', code: 'joi23.xs'},
{name: 'James', lastname: 'Maxwell', email: 'magneto@gmail.com', code: 'Moiu23s'},
];
var dataTable = $('#mytable').DataTable({
sDom: 't',
data: srcData,
columns: [
{title: 'Name', data: 'name'},
{title: 'Lastname', data: 'lastname'},
{title: 'e-mail', data: 'email'},
{
title: 'Wi-Fi code',
data: 'code',
render: (data) => data+'<button style="float:right">e-mail</button>'
}
]
});
$('#mytable').on('click', 'button', event => {
let rowData = dataTable.row($(event.target).closest('tr')).data();
alert(`Are you sure you wanna send wi-fi code "${rowData.code}" to that sneaky bastard ${rowData.name} on his e-mail (${rowData.email})?`);
});
<!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>
推荐阅读
- r - 使用线性模型在矩阵中估算 NA 值
- visual-studio - 如何统一排序动画
- html - 对齐图形及其文本/图形标题
- vapor - Vapor 3 在 Leaf 中渲染复杂的调用
- docker - 在 macOSX 上远程使用 docker-compose 时出现 CryptographyDeprecationWarning
- python - 在熊猫坐标变化之前找到最后一行
- javascript - 无法在 JavaScript 中推送到数组
- delphi - Delphi 10.3 中的 HTTPReqResp OnBeforePost 更改
- r - 尝试下载 R 包“treemap”时出现错误
- c - 在 C 中自定义处理内存读取和写入