Модальность Bootstrap 3.2 с API Datatables 1.10 row.add

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

Что я здесь делаю неправильно? Это ошибка таблиц данных?

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

jquery twitter-bootstrap-3 jquery-datatables
person MarkOfHall    schedule 03.12.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

У dataTable есть проблема, когда таблица скрыта при создании. Используйте показанное модальное событие.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();
})
person dm4web    schedule 04.12.2014