我的表中有一列很长的字符串。所以我试图以弹出模式显示它。
当我单击按钮启动模式时,页面只会刷新,甚至什么也不会打印到控制台。
模态HTML:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle"></h3>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
这是DataTable创建中的代码段。
{ data: 'Journal',
render: function(data, type, row) {return '<button class="btn btn-primary" data-toggle="modal" data-Journal="'+data+'" data-target="#myModal">'+"Details"+'</button>'} },
模态表演事件。控制台上没有任何打印内容,所以我猜这里是错误所在。
$("#myModal").on('show.bs.modal', function (e) {
var triggerLink = $(e.relatedTarget);
var journal = triggerLink.data("Journal");
console.log(e.relatedTarget);
console.log(journal);
$("modalTitle").text("Title");
$(this).find(".modal-body").html("<h5>"+journal+"</h5>");});
答案 0 :(得分:2)
尝试将按钮更改为 type = button ,因为其默认设置为提交'
render: function(data, type, row) {return '<button class="btn btn-primary" data-toggle="modal" data-Journal="'+data+'" type="button" data-target="#myModal">'+"Details"+'</button>'} },
答案 1 :(得分:0)
由于您没有提供有关用例的任何相关详细信息,因此,我组成了自己的示例,该示例提供了重要的想法,
//make up random source for DataTable
const tableSrc = [...Array(5)].map((item, index) => {
const rowObj = {};
rowObj.user = 'user'+(index+1);
rowObj.ip = [...Array(4)].map(() => Math.floor(Math.random()*140)+10).join('.');
rowObj.hash = [...Array(256)].map(() => String.fromCharCode(Math.floor(Math.random()*(126-33))+33)).join('');
return rowObj;
});
//initialize DataTable
const dataTable = $('#mytable').DataTable({
sDom: 't',
data: tableSrc,
columns: [
{title: 'Username', data: 'user'},
{title: 'IP address', data: 'ip'},
{
title: 'Hash',
data: 'hash',
render: data => `<span>******</span><button class="showhash">show</button>`
}
]
});
//display 'hash' property for particular row upon clicking the button
$('#mytable').on('click', 'button', function(){
const clickedRow = dataTable.row($(this).closest('tr'));
const modalTitle = `Hash for ${clickedRow.data().user}`;
const modalBody = clickedRow.data().hash;
$('#mymodal .modal-title').text(modalTitle);
$('#mymodal .modal-body').text(modalBody);
$('#mymodal').modal('toggle');
});
td button {
float:right
}
<!doctype html>
<html>
<head>
<!--jQuery DataTables prerequisites-->
<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">
<!--bootstrap prerequisites-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!--DataTable-->
<table id="mytable"></table>
<!--Bootstrap modal-->
<div id="mymodal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>