Question

我正在使用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')
});
});

Answer 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>

模态将在所有页面上自动初始化。见demo - ＆gt;的 http://jsfiddle.net/9p5uq7h3/

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

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

使用数据表

1 个答案: