DataTables - 以模态显示列数据答案

【问题标题】：DataTables-show column data in modalDataTables - 以模态显示列数据
【发布时间】：2019-02-28 17:15:12
【问题描述】：

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

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

模态的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的sn-p。

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

【问题讨论】：

您的模态实例是否可能在您的侦听器之前？顺序很重要，可以防止show.bs.modal 事件正确触发：stackoverflow.com/questions/19279629/…
您是想在整个表格（所有行）的特定列中显示模态数据条目，还是仅显示特定行？
不管这两者是什么，我无法确定您在代码中的哪个位置尝试访问 DataTable 数据。
请在下面查看我的答案。

标签： javascript jquery datatables

【解决方案1】：

尝试将您的按钮更改为 type = button，因为它的默认值为 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>'} },

【讨论】：

是的，它可以显示模态。日志数据仍未填充。控制台日志也没有显示。

【解决方案2】：

由于您没有提供有关您的用例的任何相关详细信息，因此我编写了自己的示例，该示例提供了主要思想：

//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">&times;</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>

【讨论】：