使用Jquery集成数据表 [英] Integrating Datatables using Jquery

问题描述

现在我想使用JQuery

集成插件Datatables，例如我可以将其添加到上面的代码中：

$（ 表＃myTableId）的dataTable（）;

如果我从HTML源获取表的ID并调用dataTable（）函数，则所有提到的功能都将自动显示添加，他们将完全正常运作。 jQuery DataTables采用纯HTML表并动态注入所有元素，





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





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

< script type =text / javascriptcharset =utf-8> 
 
 
 
 d3.text（文件，函数（datasetText）{
 
 
 var rows = d3.csv.parseRows（datasetText） ; 
 
 var tbl = d3.select（＃container）
 .append（table）; 
 
 tbl.attr（id， tableID）; 
 
 
 // headers 
 tbl.append（thead）。append（tr）
 .selectAll（th）
 .data（rows [0]）
 .enter（）。append（th）
 .text（function（d）{
 return d; 
} ）; 
 
 //数据
 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（function） ）{
 $（'＃tableID'）。dataTable（）; 
}）; 
 
}）; 
 
 
 
 
 
 
 
 
< / script> 

解决方案

（table＃myTableId）。dataTable（）;

如果我从HTML源获取表的ID并调用dataTable（）函数，则所有提到的功能都将自动显示添加，他们将完全正常运作。 jQuery DataTables采用纯HTML表并动态注入所有元素，





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





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

< script type =text / javascriptcharset =utf-8> 
 
 
 
 d3.text（文件，函数（datasetText）{
 
 
 var rows = d3.csv.parseRows（datasetText） ; 
 
 var tbl = d3.select（＃container）
 .append（table）; 
 
 tbl.attr（id， tableID）; 
 
 
 // headers 
 tbl.append（thead）。append（tr）
 .selectAll（th）
 .data（rows [0]）
 .enter（）。append（th）
 .text（function（d）{
 return d; 
} ）; 
 
 //数据
 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>

Now I want to integrate the plugin Datatables using JQuery
for example I can add this into my code above :

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

If I take the ID of the table from the HTML source and call the dataTable() function, all the mentioned features will be automatically added and they will be fully functional. jQuery DataTables takes the plain HTML table and dynamically injects all elements,


I assign an id to my table I created above so that I can use the ID to call the datatable() later on.


I managed to add the ID but there's no change to my Table when I call the dataTable(). What did I do wrong?

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



    d3.text(file, function (datasetText) {


    var rows = d3.csv.parseRows(datasetText);

    var tbl = d3.select("#container")
        .append("table");
     
    tbl.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>

解决方案

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

If I take the ID of the table from the HTML source and call the dataTable() function, all the mentioned features will be automatically added and they will be fully functional. jQuery DataTables takes the plain HTML table and dynamically injects all elements,


I assign an id to my table I created above so that I can use the ID to call the datatable() later on.


I managed to add the ID but there's no change to my Table when I call the dataTable(). What did I do wrong?

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



    d3.text(file, function (datasetText) {


    var rows = d3.csv.parseRows(datasetText);

    var tbl = d3.select("#container")
        .append("table");
     
    tbl.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>

这篇关于使用Jquery集成数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！