引导表分页和搜索不起作用

Bootstrap table pagination and searching is not working

本文关键字：搜索 不起作用 分页      更新时间：2023-09-26

我是引导程序的新手，在D3.js、crossfilter.js中工作以生成表内容。我喜欢获得如下URL中的数据表，并使用引导程序在数据表中进行分页和搜索。

在该示例中，表是用id和类静态定义的。我能够运行具有所需输出的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>

在我将支持的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>

希望它对某人有用。。

相关文章：