javascript - 数据表 Bootstrap 模式不起作用

Question

我正在尝试使用数据表插件单击以打开模态中动态生成的行的可编辑内容。

我看到一个错误:

Uncaught TypeError: Cannot read property 'display' of undefined.

除了 jquery 和 bootstrap.min.js 之外，我还使用以下文件:

<!-- Datatables -> these files are required to make the table headers fixed, sortable etc-->

<link href="../../../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">

我初始化数据表的代码如下所示:

dtEdit = $('#edit-element').DataTable({
  "paging": false,
  "info": false,
  "bFilter": false,
  "bPaginate": false,
  retrieve: true,
  "processing": true,
  columns: [{
      'data': 'status'
    },

    {
      'data': '_id'
    },
    {
      'data': 'email'
    },
    {
      'data': 'role'
    },
  ],
  responsive: {
    details: {
      display: $.fn.dataTable.Responsive.display.modal({
        header: function ( row ) {
          var data = row.data();
          return 'Details for '+data[0]+' '+data[1];
        }
      }),
      renderer: $.fn.dataTable.Responsive.renderer.tableAll({
        tableClass: 'table'
      })
    }
  }
});

请问有什么指点吗？

附注-> 我正在努力实现这样的目标: https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html

Answer 1

要满足您的要求，您应该按照给定的步骤操作。
1. $(document).ready(function () );即文档准备好后使用 jquery DOM。
2. $('.my_button').click(function () );即当您单击按钮时，应该加载模式。
3. $('#mydatatable').DataTable();即最后在 $(document).ready(function ());

的主体内加载数据表

    $(document).ready(function ()
    {

        //When the button is clicked
        $('.my_button').click(function () {

            //Your code for modal 

        });<br>

        $('#mydatatable').DataTable();
    });