借助D3.js集成Datatables插件

Integrate Datatables plugin with the help of D3.js

本文关键字：Datatables 插件 集成 js D3 借助      更新时间：2023-09-26

我已经研究了几个小时了——我不知道我的代码中哪一部分是错误的。当我运行代码时，我设法制作并显示了一个合适的表，但我希望能够将我的表制作成这样——http://www.codeproject.com/Articles/194916/Enhancing-HTML-tables-using-a-JQuery-DataTables-pl#Introduction

所以我尝试使用Datatablejquery插件。到目前为止没有运气。求你了，我将非常感谢你的帮助。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
 <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://d3js.org/d3.v2.js"></script>

<style>
    table {
        border-collapse: collapse;
        border: 2px black solid;
        font: 12px sans-serif;
    }
    td {
        border: 1px black solid;
        padding: 5px;
    }
</style>
</head>
<body>

 <div id="container"></div>
  <script type="text/javascript"charset="utf-8">

  d3.text("file.csv", function (datasetText) {
  var rows = d3.csv.parseRows(datasetText);
  var tbl = d3.select("#container")
    .append("table")
    .attr("id","tableID");

// headers
  tbl.append("thead").append("tr")
    .selectAll("th")
    .data(rows[0])
    .enter().append("th")
    .text(function(d) {
        return d;
    });
   // data
    tbl.append("tbody")
    .selectAll("tr").data(rows.slice(1))
    .enter().append("tr")
    .selectAll("td")
    .data(function(d){return d;})
    .enter().append("td")
    .text(function(d){return d;})

   });
     $(document).ready(function() {
         $('#tableID').dataTable();
     } );

</script>
 </body>
 <html>
  1. 查看浏览器控制台中的任何错误，如果您无法自行解释，请在此处提及。它说dataTables函数是未知的，这是由于您包含两个不同的jquery版本。我猜jquery的第二个include用定义的dataTables插件替换了inital命名空间
  2. dataTables插件不应在CSV回调函数之外调用。如果加载csv&回调的执行时间太长，甚至在DOM出现之前就调用了$('#tableID').dataTable();。在回调中移动它
$（document）.ready（function）{d3.text（"file.csv"，函数（datasetText）{//绘制d3元素$（'#tableID'）.dataTable（）；})；})；
相关文章：