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表分页和搜索不起作用

回答

相关问题