Jquery 带Datatables 1.10 API row.add的Bootstrap 3.2模式

我正在使用Bootstrap3的模态类和Datatables 1.10创建一个包含动态datatable的确认模态对话框。每次显示模式时，我都需要替换表中的行，因此我使用datatables API动态地清除和添加行。我遇到的问题是datatables正在创建另一个表并向其中添加行，而不是将行添加到包含标题的现有表中。下面是一些标记、javascript和一个指向JSFIDLE的链接，该链接演示了这种行为

我做错了什么？这是datatables错误吗

html

数据表在创建时隐藏时出现问题。使用modal event show.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();
})

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

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