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