twitter-bootstrap – 使用数据表中的分页后不显示Bootstrap模式

发布时间：2020-12-18 00:30:01 所属栏目：安全来源：网络整理

导读：我正在使用Bootstrap 3和数据表1.9.单击数据表第一页中的锚标记时,模态打开,但在使用数据表分页后显示Bootstrap模式时出现问题.如何解决这个问题. 这是我的代码 html body table id=prodlist class="table table-bordered table-striped" thead tr th#/th /t

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

解决方法

问题是你通过$(“.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 – > http://jsfiddle.net/9p5uq7h3/

如果你唯一关心的是模态的内容,那么简单

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!