我正在使用Bootstrap 3和数据表1.9.单击数据表第一页中的锚标记时,模态打开,但在使用数据表分页后显示Bootstrap模式时出现问题.如何解决这个问题.
这是我的代码 @H_403_3@<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>
这是我的代码 @H_403_3@<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是
@H_403_3@$(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注入表和从表中删除表行以显示页面.所以你必须使用委托的事件处理程序：
@H_403_3@$("#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
});
但正如评论中所建议的那样,模态不是选择加入的,你不必以编程方式打开它们.只要你有
@H_403_3@<a href="#" data-target="#modal" data-toggle="modal">edit</a>和页面上的#modal
@H_403_3@<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">×</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/
如果你唯一关心的是模态的内容,那么简单
@H_403_3@$('body').on('show.bs.modal',function() { $(".modal-body").load(url/to/modal/template); });