Question

我正在尝试点击以使用datatables插件打开我在动态模式中生成的行的可编辑内容。

我看到一个错误：

未捕获的TypeError：无法读取未定义的属性“display”。

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

请指点什么？

P.S。 - ＆GT;我想要实现这样的事情： https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html

Answer 1

为了满足您的要求，您应该按照给定的步骤进行操作 1. $（文件）.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();
    });

datatables bootstrap模态不起作用

1 个答案: