数据表引导模式不起作用

Question

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

我看到一个错误：

未捕获类型错误：无法读取未定义的属性“显示”。

除了 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();
    });