使用数据表中的分页后引导模式未显示答案

【问题标题】：Bootstrap modal not showing after using the pagination from the datatable使用数据表中的分页后引导模式未显示
【发布时间】：2015-06-03 16:20:30
【问题描述】：

我正在使用 Bootstrap 3 和数据表 1.9。当我单击数据表第一页中的锚标记时，模态已打开，但在使用数据表分页后显示 Bootstrap 模态时出现问题。如何解决这个问题。这是我的代码

<html>
    <body>
        <table id=prodlist class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>#</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                   <td> <a href="http://localhost/admin/product/viewProduct/15" class="prod-view" data-target="#modal" data-toggle="modal">edit</a>
                </td>
                </tr>
                <tr><td>
                    <a href="http://localhost/admin/product/viewProduct/15" class="prod-view" data-target="#modal" data-toggle="modal">edit</a>
               </td></tr>
                <tr><td>
                    <a href="http://localhost/admin/product/viewProduct/15" class="prod-view" data-target="#modal" data-toggle="modal">edit</a>
               </td> </tr>
            </tbody>
        </table>
    </body>
</html>

我的数据表 javascript 是

$(function() {
    $("#prodlist").dataTable({
        "bAutoWidth": false,
        "aoColumnDefs": [{
            "sWidth": "5%",
            "aTargets": [0],
            "bSearchable": false,
            "bSortable": false,
            "bVisible": true
        }, ]
    });
});
if ($(".alert-success, .alert-error").length > 0) {
    setTimeout(function() {
        $(".alert-success, .alert-error").fadeOut("slow");
    }, 1000);
}
$(document).ready(function(){
$(".prod-view").click(function(){
    var href = $(this).attr('href');

    $( ".modal-body" ).load( href );
    $('#myModal').modal('toggle')
});
});

【问题讨论】：

您肯定没有显示您的真实代码。格式错误的标记永远不会生成带有工作模式的数据表。
我正在使用 php 和 Mysql。这里我只在表中显示了 3 行，但实际上我已经从 MySQL 中获取记录并显示在表中。我只在数据表的第二页遇到问题。我认为问题与DOM有关
由于引导模式不是可选的，所以它们也应该在第 2 页等上工作。我用上面的代码进行了测试，所有页面上都显示了模态，没有任何问题。如果您通过代码激活模态框，那将是另一回事，但您并没有这样做。
我也试过另一个例子，这也不起作用。你能在这里发布你的代码吗？提前致谢

标签： twitter-bootstrap datatables

【解决方案1】：

问题是$(".prod-view").click() 仅初始化可见内容，即第 1 页上的行。 dataTables 向 DOM 注入和删除表行以显示页面。因此，您必须改用委托事件处理程序：

$("#prodlist").on("click", ".prod-view", function() {
    var href = $(this).attr('href');
    $( ".modal-body" ).load( href );
    $('#myModal').modal('show') //<-- you should use show in this situation
});

但正如评论中所建议的那样，模式不是可选的，您不必以编程方式打开它们。只要你有

<a href="#" data-target="#modal" data-toggle="modal">edit</a>

以及页面上的#modal

<div class="modal fade" id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">This is a modal</h4>
      </div>
      <div class="modal-body">
          <p>modal</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="submit">submit</button>
      </div>
    </div>
  </div>
</div>

模式将在所有页面上自动初始化。查看演示 -> http://jsfiddle.net/9p5uq7h3/

如果您唯一关心的是模态的内容，那么只需

$('body').on('show.bs.modal', function() {
   $(".modal-body").load(url/to/modal/template);
});

【讨论】：