Javascript/JQuery for Datatables

Javascript/JQuery for Datatables

本文关键字：Datatables for JQuery Javascript      更新时间：2023-09-26

现在我想使用JQuery集成插件Datatables。例如，我可以将其添加到上面的代码中：

$("table#myTableId").dataTable();

如果我从HTML源代码中获取表的ID并调用dataTable（）函数，那么所有提到的功能都将自动添加，并且它们将完全发挥作用。jQueryDataTables采用纯HTML表并动态注入所有元素，

我为上面创建的表分配了一个id，这样我以后就可以使用该id调用datatable（）

我设法添加了ID，但当我调用dataTable（）时，我的表没有更改。我做错了什么？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
    table {
        border-collapse: collapse;
        border: 2px black solid;
        font: 12px sans-serif;
    }
    td {
        border: 1px black solid;
        padding: 5px;
    }
</style>
</head>
<body>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"     href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script> 
<!-- <script src="d3.min.js"></script>-->
<script type="text/javascript"charset="utf-8">
    d3.text("test.csv", function(data) {
        var parsedCSV = d3.csv.parseRows(data);
        var container = d3.select("body")
         .append("table")
         .attr("id", "custom_id")
            .selectAll("tr")
                .data(parsedCSV).enter()
                .append("tr")
            .selectAll("td")
                .data(function(d) { return d; }).enter()
                .append("td")
                .text(function(d) { return d; });

    });
$("#custom_id").dataTable();

</script>
</body>
<html>

像分配任何其他属性一样分配id：

var container = d3.select("body")
    .append("table")
    .attr('id', 'custom_id');

导致$('#custom_id').dataTable();

相关文章：