Bootstrap modal zeigt nicht nach der Verwendung der Paginierung aus der Datentabelle

Ich bin mit Bootstrap 3 und Daten Tabelle 1.9. Modal geöffnet ist, wenn ich auf die Anker-Tags auf der ersten Seite die Daten der Tabelle aber ich habe ein problem mit Bootstrap modal nach Verwendung der Daten-Tabelle Paginierung. Wie diese zu Lösen.
Hier ist mein code

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

mein javascript für 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')
});
});
  • Sie sind sicherlich nicht zeigen Ihre echten code. Die fehlerhafte markup würde nie produzieren eine dataTable mit der Arbeit modals.
  • ich bin mit php und Mysql.Hier habe ich die Anzeige von nur 3 Zeilen in der Tabelle , aber eigentlich habe ich das abrufen der Datensätze aus MySQL und angezeigt in der Tabelle. Ich bin mit dem problem nur auf der zweiten Seite der dataTable. Ich denke, das problem ist mit dem DOM
  • Da bootstrap modals nicht sind opt-in, dann sollten Sie auf Seite #2 etc auch. Ich machte einen test mit deinem code von oben und modals zeigte sich auf allen Seiten ohne irgendwelche Probleme. Es wäre eine andere Geschichte, wenn Sie aktiviert der modals von code, aber das tut es nicht.
  • ich habe versucht mit einem anderen Beispiel auch, ist dies auch nicht funktioniert. Können Sie bitte poste deinen code hier. Vielen Dank im Voraus
InformationsquelleAutor user936565 | 2015-06-03
  1. 9

    Das problem ist, dass Sie durch $(".prod-view").click() nur initialisiert sichtbaren Inhalt, ich.e die Zeilen auf Seite #1. dataTables injiziert und entfernt die Zeilen der Tabelle und aus dem DOM, um die Seiten anzeigen. Sie müssen also mithilfe einer Delegierten-event-handler statt :

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

    Aber wie vorgeschlagen im Kommentar, modals sind nicht opt-in, die Sie nicht haben, um Sie zu öffnen programmgesteuert. Solange Sie 

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

    und ein #modal auf der Seite

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

    Den modal initialisiert automatisch, auf allen Seiten. Siehe demo -> http://jsfiddle.net/9p5uq7h3/

    Wenn Ihre einzige Sorge ist der Inhalt des modal, dann einfach 

    $('body').on('show.bs.modal', function() {
   $(".modal-body").load(url/to/modal/template);
});
    • gute Antwort, Es ersparte mir Zeit.Danke.
    InformationsquelleAutor davidkonrad
Schreibe einen Kommentar