twitter-bootstrap - tabla - modal dinamico bootstrap
El modal de Bootstrap no se muestra después de usar la paginación de la tabla de datos (1)
Estoy usando Bootstrap 3 y Data Table 1.9. Modal está abierto cuando hago clic en la etiqueta de anclaje en la primera página de la tabla de datos, pero tengo un problema al mostrar Bootstrap modal después de usar la tabla de datos Paginación. Cómo resolver esto. Aquí está mi código
<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>
mi javascript para datatable es
$(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'')
});
});
El problema es que usted por $(".prod-view").click() solo inicializa el contenido visible, es decir, las filas en la página # 1. dataTables inyecta y elimina filas de la tabla hacia y desde el DOM para mostrar páginas. Por lo tanto, debe usar un controlador de eventos delegado en su lugar:
$("#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
});
Pero como se sugiere en los comentarios, los modales no son optativos, no es necesario abrirlos programáticamente. Mientras tengas
<a href="#" data-target="#modal" data-toggle="modal">edit</a>
y un #modal en la página
<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>
El modal se inicializará automáticamente en todas las páginas. Ver demostración -> http://jsfiddle.net/9p5uq7h3/
Si su única preocupación es el contenido del modal, entonces simplemente
$(''body'').on(''show.bs.modal'', function() {
$(".modal-body").load(url/to/modal/template);
});