Bootstrap 3.2 модальный с API Datatables 1.10 row.add

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

Что я здесь не так делаю? Это ошибка в datatables?

JSFiddle, иллюстрирующий это поведение

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();  
}
Источник

1 ответ

Решение

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

У dataTable есть проблема, когда таблица скрыта при создании. Используйте модальное событие показано.bs.modal и в этот момент определите ваш dataTable и добавьте строки

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();
})
Источник
Другие вопросы по тегам