Question

我是新手，可以在D3.js，crossfilter.js中使用bootstrap来生成表格内容。我喜欢使用以下URL中的dataTable进行一些分页，并使用bootstrap在数据表中进行搜索。

在该示例中，表是使用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>

Answer 1

在我将支持的js文件定义在body标记的末尾之后，它正在工作。我也在d3函数下启动了dataTable。一切顺利。

<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>

希望它对某人有用..

Bootstrap表分页和搜索不起作用

1 个答案: