javascript - DataTables-以模态方式显示列数据

Question

我的表中有一个长字符串列。所以我试图在弹出模式中显示它。

当我单击按钮启动模式时，页面只是刷新，甚至没有任何内容打印到控制台。

模态框的 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>

这是数据表创建的片段。

{ 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>");});

Answer 1

尝试将按钮更改为类型=按钮，因为其默认值为提交'

    render: function(data, type, row) {return '<button class="btn btn-primary" data-toggle="modal" data-Journal="'+data+'" type="button" data-target="#myModal">'+"Details"+'</button>'} },