在D3.js的帮助下集成Datatables插件

Question

I've been on this for hours - I can't figure out which part of my code that is wrong.I managed to make and display a proper table when I run my code but I want to be able to make my table like this - http://www.codeproject.com/Articles/194916/Enhancing-HTML-tables-using-a-JQuery-DataTables-pl#Introduction 我已经花了几个小时了-我无法弄清楚代码的哪一部分是错误的。我在运行代码时设法制作并显示了正确的表，但是我希望能够使表像这样-http://www.codeproject.com/Articles/194916/Enhancing-HTML-tables-using-a-JQuery-DataTables-pl#Introduction

So I try using Datatable jquery plugin. 所以我尝试使用Datatable jquery插件。 So far no luck. 到目前为止没有运气。 Please, I would greatly appreciate your help. 拜托，非常感谢您的帮助。

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

Answer 1

Look at the browser console for any errors and mention them here, if you can't interpret them by yourself. 查看浏览器控制台中是否有任何错误，如果您不能自己解释它们，请在此处提及。 It says that the dataTables function is unknown, which is caused by the fact, that you include two different jquery versions. 它说dataTables函数是未知的，这是由以下事实引起的：您包括两个不同的jquery版本。 I'm guessing the 2nd include of jquery replaces the inital namespace with the dataTables plugin defined. 我猜jquery的第二个include用定义的dataTables插件替换了初始名称空间。
The dataTables plugin should not be called outside the CSVs callback function. dataTables插件不应在CSV回调函数之外调用。 If loading the csv & execution the callback takes too long, the $('#tableID').dataTable(); 如果加载csv和执行，则回调会花费太长时间， $('#tableID').dataTable(); is called before the DOM is even there. 在DOM出现之前就被调用。 Move it inside the callback. 将其移动到回调中。

$(document).ready(function() {
    d3.text("file.csv", function (datasetText) {
        // draw d3 elements
        $('#tableID').dataTable();
    });
});

在D3.js的帮助下集成Datatables插件

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-03-25 13:58:21

在D3.js的帮助下集成Datatables插件

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-25 13:58:21

解决方案1
0 已采纳 2015-03-25 13:58:21