Question

我正在尝试使用D3绘制表格，还使用DataTable()来实现其他功能，例如对列进行排序，整体表格搜索等。但是我无法与DataTable一起使用。我有动态data，我将不得不动态填充表中（添加额外的行）。为此，每次将表格制成表格时，都会删除整个表格。我可以使用普通的d3表来执行此操作，但是当我尝试使用DataTable时，它将引发以下错误。

我有一个下拉菜单，用户可以从中选择任何项目。 listen_change侦听此类更改，并使用与我使用DB的ajax获取的项目相对应的数据绘制表。数据库不断从其他地方更新。

我想知道一种使用DataTable的方法，而无需为动态表重新初始化它（如错误警报所指出的）。任何帮助，将不胜感激。预先感谢。

我收到以下警报

DataTables警告：表id = table_id-无法重新初始化数据表。有关此错误的更多信息，请参见 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秒钟后，整个表就会恢复。如何动态更新数据而不影响搜索功能？任何帮助，将不胜感激。预先感谢。

如何使用D3和DataTable

0 个答案: