Il modale Bootstrap non viene visualizzato dopo aver utilizzato l'impaginazione dal datatable

Sto utilizzando Bootstrap 3 e Data Table 1.9. Il modale è aperto quando faccio clic sul tag di ancoraggio nella prima pagina della tabella di dati, ma ho un problema nel mostrare il modal Bootstrap dopo aver usato l'impaginazione della tabella di dati. Come risolvere questo. Ecco il mio codiceIl modale Bootstrap non viene visualizzato dopo aver utilizzato l'impaginazione dal datatable

<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>

mia JavaScript per datatable è

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

fonte

2015-06-03 user936565

Lei non è certamente mostrando il codice vero e proprio. Il markup malformato non produrrebbe mai un dataTable con modali di lavoro. – davidkonrad

sto usando php e Mysql.Here ho mostrato solo 3 righe nella tabella, ma in realtà ho recuperato i record da MySQL e visualizzato nella tabella. Sto affrontando il problema solo nella seconda pagina del dataTable. Penso che il problema sia legato al DOM – user936565

Dato che le modal di bootstrap non sono opt-in, dovrebbero funzionare anche sulla pagina 2 ecc. Ho fatto un test con il tuo codice sopra e le modal hanno mostrato su tutte le pagine senza problemi. Sarebbe un'altra storia se attivaste le modal tramite codice, ma non lo state facendo. – davidkonrad

Il problema è che si da $(".prod-view").click() inizializza solo il contenuto visibile, cioè le righe a pagina # 1. dataTables inietta e rimuove le righe della tabella da e verso il DOM per mostrare le pagine. Quindi, è necessario utilizzare un gestore di eventi delegato invece:

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

Ma come suggerito in commento, modali non sono opt-in, non dovete aprirli programmazione. Finché si dispone di

<a href="#" data-target="#modal" data-toggle="modal">edit</a>

e #modal sulla pagina

<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>

Il modale verrà inizializzato automaticamente, su tutte le pagine. Vedi demo ->http://jsfiddle.net/9p5uq7h3/

Se la vostra unica preoccupazione è il contenuto del modal, poi semplicemente

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

fonte

2015-06-04 14:02:13 davidkonrad

buona risposta, mi ha salvato il mio tempo. Grazie. –

Il modale Bootstrap non viene visualizzato dopo aver utilizzato l'impaginazione dal datatable

risposta

Problemi correlati