Question

我对DataTables和Bootstrap模式有两个问题。

第1页后无法使用动态构建的按钮

（由Yuri解决）

我有这个表，它是由AJAX请求动态构建的，数据正确加载并按原样构建表，按钮＆＃39; Manage＆＃39;并且＆＃39;删除＆＃39;设置了类，当点击它时应该在当前页面的顶部打开另一个模态，在表格的第一页上工作正常，如果我转到第2页它没有动作就好像没有听众就可以了。

数据表未在第二模式初始化（可能与问题1相关）

我在下面的jQuery中初始化另一个DataTables，该模式是＆＃39; Manage＆＃39;按钮应该打开。当它打开时，它应初始化另一个DataTables并从AJAX请求中获取数据，但在Chrome开发人员工具的网络选项卡中，它不会被运行。

我发现问题是，DataTables由于某种原因未被初始化？ jQuery可以在那里工作我无法理解我在这里做错了什么？

$(document).ready(function(){

      $('.valid-tags').on('click', '.manageAutofixes', function(){
          $('.autofixes-modal').modal('show');
          $('.autofixes-modal').on('shown.bs.modal', function () {
            var table = $('.autofixes-table').DataTable({
                "ajax": {
                  "url": "/ajax/getValidTags.php",
                  "type": "POST",
                  "data": {
                    ruleID: ruleID,
                    type: 'autofixes'
                  },
                },
                "columnDefs": [{
                   "targets": 2,
                   "render": function(data, type, full, meta){
                      return '<button class="btn btn-default btn-sm manageAutofixes" type="button">Manage</button> <button class="btn btn-danger btn-sm deleteValid">Delete</button>';
                   }
                }],
                destroy: true     
            });         
          })    
      })


    });

我的模态HTML（包含在页面上）

 <div class="modal fade autofixes-modal" tabindex="-1" role="dialog" aria-labelledby="LargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

    <div class="modal-dialog modal-wide">

        <div class="modal-content">

            <div class="modal-header modal-header-custom">
            <input class="ruleID" type="hidden"></input>     
                <button type="button" class="close destroyTable" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title">Autofixes</h4>
            </div>

            <div class="modal-body">
            <div class="topBar">                       
                <div>
                    <input type="text" class="autofix inputTextStyling">                    
                </div>
            </div>
            <hr>
                <table class="table table-striped table-condensed autofixes-table" style="width:100%;">
                    <thead>
                        <tr>
                            <th>Autofix</th>
                            <th>Manage</th>
                        </tr>
                    </thead>
                    <tbody class="autoFixesTable">
                    </tbody>                    
                </table>                           
            </div>
            <div class="modal-footer">                
                <button type="button" class="btn btn-default destroyTable" data-dismiss="modal">Close</button>
            </div>

        </div>

    </div>

</div>

Answer 1

解决你的按钮＆＃39;问题，只需使用这种代表团：

$('#datatable').on('click', '.btn_class', function(){...});

它会匹配#datatable个.btn_class元素中<div class="modal-body">..</div>容器内发生的任何点击事件，它将解决您的动态添加元素的问题。

对于模态中的Datatable，我通常使用远程模态来解决这个问题。这意味着您将$("#myModal").on("show.bs.modal", function(e) { var link = $(e.relatedTarget); $(this).find(".modal-body").load(link.attr("href")); }); html代码和相关JS代码（该代码用于初始化Datatable）放在（php）文件中，并使用以下命令加载：

$(document).ready();

编辑：请记住在远程php文件中使用

create table transfers (
id INT NOT NULL AUTO_INCREMENT,
     sender VARCHAR(100) NOT NULL,
     recipient VARCHAR(100) NOT NULL,
          date DATE, 
          amount VARCHAR(100) NOT NULL,
          PRIMARY KEY ( id )
      );

，这样代码只有在modal-body完全加载时才会运行

Answer 2

问题是在绑定动作后加载了第2页的按钮＆＃34;单击＆＃34;。每次加载结果时都必须重新绑定动作（通过ajax）

您可以使用数据表选项fnDrawCallback

fnDrawCallback: function( oSettings ) {
  $('.manageAutofixes').on('click', function(){
      $('.autofixes-modal').modal('show');
      alert('hi');
  }
}

DataTables无法使用Bootstrap模态正确初始化

2 个答案: