Bootstrap modal не отображается после использования разбивки на страницы из данных

Я использую Bootstrap 3 и Data Table 1.9. Модаль открыт, когда я нажимаю тег привязки на первой странице таблицы данных, но у меня есть проблема с отображением Bootstrap modal после использования таблицы данных Pagination. Как разрешить это. Вот мой кодBootstrap modal не отображается после использования разбивки на страницы из данных

<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 для 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') 
}); 
});

источник

2015-06-03 user936565

Вы, конечно, не показывая свой реальный код. Неправильная разметка никогда не создавала бы dataTable с рабочими модалами. – davidkonrad

Я использую php и Mysql.Here у меня есть только 3 строки в таблице, но на самом деле я извлекаю записи из MySQL и отображаются в таблице. Я столкнулся с проблемой только на второй странице dataTable. Я думаю, что проблема связана с DOM – user936565

Так как мода загрузочного мода не включена, тогда они также должны работать на странице # 2 и т. Д. Я проверил ваш код выше, и модальность появилась на всех страницах без проблем. Это была бы другая история, если бы вы активировали модалы по коду, но этого вы не делаете. – davidkonrad

Проблема заключается в том, что вы на $(".prod-view").click() инициализирует только видимое содержание, то есть строк на странице # 1. dataTables вводит и удаляет строки таблицы в DOM и из 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">&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); 
});

источник

2015-06-04 14:02:13 davidkonrad

хороший ответ, он спас мне время. Спасибо. –

Bootstrap modal не отображается после использования разбивки на страницы из данных

ответ

Смежные вопросы