Bootstarp表分頁和搜索不起作用

我是新來引導和工作在D3.js，crossfilter.js生成表內容。我喜歡用下面的URL來獲取dataTable，並使用bootstrap在數據表中搜索。Bootstarp表分頁和搜索不起作用

在那個例子中，表格是用id和class靜態定義的。我可以像示例頁面源代碼一樣運行具有所需輸出的html頁面。

但在我的情況下，我正在從函數生成一個表，並且無法在表的頂部獲得分頁和searchBox。我添加了所有支持的文件，如js和css文件。

這是我的代碼，我只是減少了代碼，以避免在此門戶中的更多空間。我可否知道我在做什麼錯誤。

<html> 
    <head> 
    <meta http-equiv="Content-type" content="text/html; charset=us-ascii"> 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
    <title>DataTables example - Bootstrap</title> 
    <link rel="shortcut icon" type="image/png" href="/media/images/favicon.png"> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.css" /> 
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="https://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script> 
    <script src="https://cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.js"></script> 
    </head> 
    <body> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script> 
    <script type='text/javascript' src="crossfilter.js"></script> 
    <div id="Default" class="default"></div> 
    <script> 
    $(document).ready(function() { 
    $('#example').dataTable(); 
    $('#Default').show(); 
    }); 
    d3.json("myJson.json", function (desing) { 
    var data = desing; 
    var ndx = crossfilter(data); 
    var state1 = ndx.dimension(function (d) {return d.region;}); 
    var dist1 = ndx.dimension(function (d) { return d.cluster;}); 
    var taluk1 = ndx.dimension(function (d) { return d.center;}); 
    var village1 = ndx.dimension(function (d) { return d.loan_type_id;}); 

    cfds = ndx.dimension(function (d) {return d.region; }); 
    $("#Default").html(totable(cfds.top(Infinity))); 
    cfds.filterAll(); 
    }); 

    function totable(json) { 
    var html = ""; 
    html += "<thead>" 
    html += "<tr>" 
    html += "<th>REGION</th>" 
    html += "<th>CLUSTER</th>" 
    html += "<th>CENTER</th>"  
    html += "<th>GLP MONTH</th>" 
    html += "<th>LOAN AMT DISBURSED</th>" 
    html += "<th>NEW MEMBERS</th>" 
    html += "<th>DEMAND</th>" 
    html += "<th>PRINCIPAL</th>" 
    html += "<th>INTEREST</th>" 
    html += "<th>WRITTEN OFF</th>" 
    html += "<th>HM-PROCESSED</th>" 
    html += "<th>HM-ELIGIBLE</th>" 
    html += "<th>Eligible %</th>" 
    html += "<th>LOAN TYPE</th>" 
    html += "</tr>" 
    html += "</thead>" 

    json.forEach(function (row) { 
    html += "<tr role='row'>"; 
    for (key in row) { 
    html += "<td>" + row[key] + "</td>"; 
    }; 
    html += "</tr>"; 
    }); 
    return "<table id='example' class='table table-striped table-bordered' cellspacing='0' width='100%' role='grid' aria-describedby='example_info'>" + html + "</table>"; 
    } 
    </script> 
    </body> 
    </html>

來源

2014-10-27 DevGo

是否有任何jquer或這裏舉的專家來回答這個？ – DevGo 2014-10-29 10:14:49

這是工作，我把支持js文件已經在身體結束後確定我tag.Also啓動下D3功能的數據表。現在一切順利。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="http://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script> 
</body> 
</html>

希望它是有用的人..

來源

2014-10-30 06:21:36 DevGo

它在Firefox中工作，但不是在Chrome中，有沒有人知道這個問題的解決方案？ – DevGo 2014-10-30 06:23:26

它在更改下拉列表時不生成數據表。在頁面加載數據表中工作.. – DevGo 2014-11-07 06:43:19

Bootstarp表分頁和搜索不起作用

回答

相關問題