javascript - Unable to include jquery.dataTables.min.js in html -
my code :
<!doctype html> <meta charset='utf-8'> <html> <head> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.datatables.min.js"></script> <script type="text/javascript" src="https://raw.githubusercontent.com/mpryvkin/plugins/master/pagination/simple_numbers_no_ellipses.js"></script> <link rel='stylesheet' href='style.css'> <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.datatables.min.css"> <script> $(document).ready(function() { alert("hello"); $("#ip").val(''); $('#example').datatable({ "pagingtype": "full_numbers" }); }); </script> </head> <body> <div> <form action="/home/divya/html_docs/click.html" method="post" id="form1">client_ip : <input type="text" id="ip" name="client_ip" style="width: 600px;" /> <div id="subdiv"> <button type="submit" form="form1" value="submit">submit</button> </div> </div> </br> <table id="example" class="display" cellspacing="0" width="100%"></table> <script> var tabulate = function(data, columns) { var svg = d3.select('#ip').append("svg") var table = d3.select('#example') var thead = table.append('thead') var tbody = table.append('tbody') thead.append('tr') .selectall('th') .data(columns) .enter() .append('th') .text(function(d) { return d }) var rows = tbody.selectall('tr') .data(data) .enter() .append('tr') var cells = rows.selectall('td') .data(function(row) { return columns.map(function(column) { return { column: column, value: row[column] } }) }) .enter() .append('td') .text(function(d) { return d.value }) .append("input") .attr("id", "change") .attr("type", "checkbox") .style("float", "left") .on("click", function(d, i) { var csv = $(':checkbox[id=change]:checked').map(function() { return $(this).parent().text(); }).get().join(','); $('#ip').val(csv); }); return table; } d3.csv('some1.csv', function(data) { var columns = ['client_ip'] tabulate(data, columns) }); </script> </body> </html> i'm unable include plugin in html page.
<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.datatables.min.js"></script> i'm facing following error in firebug,
typeerror: e[j] undefined ...post);for(a=0;a<n.length;a++){j=n[a][0];f=e[j].adatasort;b=0;for(c=f.length;b<c;... jquery.....min.js (line 64, col 203) due error i'm unable include pagination in html page. works like this. want add pagination html page.
actually in below code, if include alert box pagination included html page after clicking ok button of alert box. if did not include alert box in below code, i'm unable include pagination due above error.
<script> $(document).ready(function() { alert("hello"); $("#ip").val(''); $('#example').datatable({ "pagingtype": "full_numbers" }); }); </script> can please me out regarding issue?
solution
you need initialize table once finished manipulating <table> element , adding rows, i.e. after call tabulate().
d3.csv('getcsv', function(data) { var columns = ['client_ip'] tabulate(data, columns) $('#example').datatable({ "pagingtype": "full_numbers" }); }); i put code handler ready event, since you're accessing , manipulating dom nodes.
demo
see updated plunker code , demonstration.
Comments
Post a Comment