DataTables-以模式显示列数据 [英] DataTables-show column data in modal

问题描述

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

I have a column in my table that is a long string. So i'm trying to show it in a popup modal.

当我单击按钮启动模式时，页面只会刷新，甚至什么都不会打印到控制台.

When i click the button to launch the modal, the page just refreshes and nothing is even printed to console.

模态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创建中的代码段.

Here is snippet in DataTable creation.

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

模态表演事件.控制台上什么都没有打印，所以我猜这里之前是错误.

The modal show event. Nothing is printed in console so i'm guessing the error is before here.

$("#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>");});

推荐答案

尝试将按钮更改为 type = button ，因为其默认值为 submit '

Try changing your button to type = button as its default is submit'

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

这篇关于DataTables-以模式显示列数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！