gpt4 book ai didi

javascript - 如何使用数据表在单击按钮时显示带有列数据的确认模式

转载 作者:行者123 更新时间:2023-11-30 14:09:54 24 4
gpt4 key购买 nike

有了下面的数据表,我想在单击按钮时显示一个动态弹出窗口或模式,这将用作确认模式。

模式应包含来自单击按钮的相关行中的列的数据。 enter image description here

@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>

关于javascript - 如何使用数据表在单击按钮时显示带有列数据的确认模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54673651/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com