Интеграция плагина Datatables с помощью D3.js

Я был в этом часом - я не могу понять, какая часть моего кода неверна. Мне удалось создать и отобразить правильную таблицу, когда я запустил свой кода, но я хочу, чтобы моя таблица была такой: http://www.codeproject.com/Articles/194916/Enhancing-HTML-tables-using-a-JQuery-DataTables-pl#Introduction Интеграция плагина Datatables с помощью D3.js

Итак, я пытаюсь использовать Datatable jquery plugin. Пока не повезло. Прошу вас, я очень признателен вам за вашу помощь.

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

источник

2015-03-25 RH1922

Можете ли вы описать, что случилось с вашим столом, или сделать скрипку? – Michel

Нет ничего плохого в таблице. Это просто, когда я вызываю $ ('# tableID'). DataTable(); - ничего не произошло/никаких манипуляций не произошло. @Michel – RH1922

Посмотрите на консоли браузера для каких-либо ошибок и упоминать их здесь, если вы не можете интерпретировать их самостоятельно. В нем говорится, что функция dataTables неизвестна, что вызвано тем фактом, что вы включаете две разные версии jquery. Я предполагаю, что второй вариант jQuery заменяет пространство имен inital с определенным плагином dataTables.
Плагин dataTables не следует вызывать вне функции обратного вызова CSV. При загрузке выполнения csv & обратный вызов занимает слишком много времени, $('#tableID').dataTable(); вызывается перед DOM. Переместите его внутри обратного вызова.

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

источник

2015-03-25 13:58:21 Imperative

Большое спасибо - мне удалось заставить его работать. Я удалил одну из версий JQuery. – RH1922

Мне было интересно, могу ли я задать другой вопрос - у меня есть эта строка d3.text ("file.csv", function (datasetText) {...} Если бы я должен был интегрировать somesort файлового браузера, как мне это сделать ? – RH1922

Интеграция плагина Datatables с помощью D3.js

ответ

Смежные вопросы