Bootstrap 3.2 modal с Datatables 1.10 API row.add

Я использую модальные классы Bootstrap 3 и Datatables 1.10 для создания модального диалога подтверждения, содержащего динамический datatable. Каждый раз, когда модальный отображается, мне нужно заменить строки в таблице, поэтому я использую API-интерфейсы datatables для очистки и добавления строк динамически. Проблема, с которой я сталкиваюсь, заключается в том, что datatables создает другую таблицу и добавляет к ней строки, вместо того, чтобы добавлять строки в существующую таблицу, содержащую заголовки. Ниже приведена часть разметки, javascript и ссылка на JSFiddle, которая иллюстрирует это поведение.Bootstrap 3.2 modal с Datatables 1.10 API row.add

Что я здесь делаю неправильно? Является ли это ошибкой datatables?

JSFiddle illustrating this behavior

HTML

<body> 
<div id="theModal" class="modal fade" hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title">Confirmation</h4> 
     </div> 
     <div class="modal-body"> 
     <div> 
      <table id="foobar" class="table table-condensed table-striped table-bordered small"> 
       <thead> 
        <th>col 1</th> 
        <th>col 2</th> 
        <th>col 3</th> 
        <th>col 4</th> 
       </thead> 
       <tbody> 
       </tbody> 
      </table> 
     </div> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 


<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-6"> 
      <a href="#" id="theButton" role="button" class="btn btn-primary" >show modal</a> 
     </div> 
    </div> 
</div> 
</body>

Javascript

var theTable; 
$(document).ready(function(){ 

    $('#theButton').click(function(e) { 
      // just illustrating my dynamic data.... 
      var data = ['data 1', 'data 2', 'data 3', 'data 4'] 
      showTheModalTable(data); 
    }); 

    theTable = $('#foobar').dataTable({ 
     "searching": false, 
     "ordering": false, 
     "paging" : false, 
     "scrollY": "300px", 
     "scrollCollapse": true, 
     "info" : true 
    }); 

}); 

function showTheModalTable(data){ 

    theTable.api().clear();   
    theTable.api().row.add(data); 

    $('#theModal').modal(); 
    theTable.api().draw(); 
}

источник

2014-12-03 MarkOfHall

http://jsfiddle.net/2Lo1qzk2/12/

Объект DataTable имеет проблему, когда таблица скрыта при создании. Используйте модальное событие show.bs.modal и в этот момент определите свою таблицу данных и добавьте строки

var theTable; 
$(document).ready(function() { 

    $('#theButton').click(function (e) { 

     showTheModalTable(); 
    }); 

    theTable = $('#foobar').dataTable({ 
     "searching": false, 
      "ordering": false, 
      "paging": false, 
      "scrollY": "300px", 
      "scrollCollapse": true, 
      "info": true 
    }); 

}); 

function showTheModalTable() { 
    $('#theModal').modal(); 
} 

$('#theModal').on('shown.bs.modal', function (e) { 
    var data = ['data 1', 'data 2', 'data 3', 'data 4'] 
    theTable.api().clear(); 

    theTable.api().row.add(data).draw(); 
})

источник

2014-12-04 02:16:16 dm4web

Bootstrap 3.2 modal с Datatables 1.10 API row.add

ответ

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