Как нарисовать таблицу с динамическими данными, используя D3 и DataTable

Question

Я пытаюсь нарисовать таблицу, используя D3, а также DataTable() для других функций, таких как сортировка столбцов, общий поиск таблицы и т. Д. Но я не могу согласиться с DataTable. У меня есть динамический data, который я должен заполнить в таблице динамически (добавление дополнительных строк). Для этого я удаляю всю таблицу каждый раз, когда создаю таблицу. Я могу сделать это с обычной таблицей d3, но когда я пытаюсь использовать DataTable, он выдает ошибку ниже.

У меня есть выпадающее меню, из которого пользователь может выбрать любой элемент. listen_change прислушивается к такому изменению и рисует таблицу с данными, соответствующими этому элементу, которые я получаю, используя ajax из БД. БД обновляется откуда-то еще.

Я хочу знать, как использовать DataTable без повторной инициализации (как показывает предупреждение об ошибке) для моей динамической таблицы. Любая помощь будет оценена. Заранее спасибо.

Я получаю следующее предупреждение,

Предупреждение DataTables: идентификатор таблицы = идентификатор_таблицы - Невозможно повторно инициализировать Таблица данных. Для получения дополнительной информации об этой ошибке, пожалуйста, см. http://datatables.net/tn/3

Часть кода Javascript:

function listen_change() {
var timeOutId = 0;
document.getElementById('select_item').addEventListener('change',function() {
    var e = document.getElementById("select_item");
    var item_name = e.options[e.selectedIndex].text;
    clearTimeout(timeOutId);
    (function worker() {
        $.ajax({
            url: '/my_url/' + item_name + '/',
            success: function(data) {
                //delete_table(table_id)
                table_data(data)
            },
            complete: function() {
                // Schedule the next request when the current one's complete
                timeOutId = setTimeout(worker, 3000);
            }
        });
    })();
});
}
function table_data(data){
    //puts data in the format required to draw D3 table
    tabulate(table_id, data, columns)
}

function tabulate(container, data, columns){
    var table = d3.select(container).attr("width",1)
    var thead = table.append('thead')
    var tbody= table.append('tbody')
    var headers = thead.append("tr")
                       .selectAll("th")
                       .data(columns)
                       .enter()
                       .append("th")
                       .text(function(column) {
                                return column; 
                            })
    // create a row for each object in the data
    var rows = tbody.selectAll("tr")
                    .data(data)
                    .enter()
                    .append("tr");
    // create a cell in each row for each column
    var cells = rows.selectAll("td")
                    .data(function(row) {
                            return columns.map(function(column,id) {
                                                return {column: column, value: row[column]};
                                                }); 
                    })  
                    .enter()
                    .append("td")
                    .attr("style", "font-family: Arial") // sets the font style
                    .html(function(d) { 
                            return d.value; 
                        });
    $(document).ready(function(){
        var o_table = $('#table_id').DataTable({
                                    'bSort': true,
                                    'bFilter': true,
                                    "autoWidth":true,
                                    "scrollY":        "600px",
                                    "scrollCollapse": true,
                                    "info":           true,
                                    "paging":        true,
                                    "bLengthChange" : true,
                                    "iDisplayLength":60,
                                    "aLengthMenu" : [30,60,100],
                                    });
                    })
    return table;
}

HTML-часть:

<div>
    <table class="table table--bordered table--highlight" align='center' cellspacing=50 cellpadding=20 id="table_id">
    </table>
</div>
    <script type="text/javascript">
      $(document).ready(function(){
        listen_change();
     });
    </script>

ОБНОВЛЕНИЕ 1

Я попытался ввести 'bDestroy' : true в DataTable(), и я очищаю данные внутри таблицы, используя $('table_id').empty(). Это помогает мне в уничтожении экземпляра DataTable и помогает заменить таблицу, и, таким образом, данные изменяются динамически. Но это подводит меня к новой проблеме сейчас. Я обновляю таблицу каждые 3 секунды, как указано в коде. Теперь, если пользователь пытается найти что-либо, используя опцию поиска, это работает, но через 3 секунды вся таблица возвращается обратно. Как обновить данные dymanaical, не влияя на функцию поиска? Любая помощь будет оценена. Заранее спасибо.