数据表引导模式不起作用

Posted 2023-05-08

【中文标题】数据表引导模式不起作用

【英文标题】：datatables bootstrap modal not working

【发布时间】：2017-11-08 03:30:44

【问题描述】：

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

我看到一个错误：

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

除了 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

【问题讨论】：

包含的 js 文件列表在哪里？

我已经按照提供的链接包含了 JS 文件

嗯，我的也不行。今晚下班后我再看看。

提前感谢@Bindrid！

我把 Allans 的东西从他的页面上拉下来，让它独立存在。起初它不起作用，但它开始了。 jsbin.com/jazime/edit?html,js,output

【参考方案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();
    );