gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 07:04:51 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 3 和数据表 1.9。当我单击数据表第一页中的 anchor 标记时,模态已打开,但在使用数据表分页后显示 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 将表行注入(inject)到 DOM 或从 DOM 中删除表行以显示页面。因此,您必须使用委托(delegate)事件处理程序:

$("#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);
});

关于twitter-bootstrap - 使用数据表中的分页后, Bootstrap 模式不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30625578/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com