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 to include this plugin in my html page.
<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
I'm facing the following error in firebug,
TypeError: e[j] is 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 to this error I'm unable to include pagination in my HTML page. It works like this. Now I want to also add pagination into my HTML page.
Actually in the below code, if I include an alert box the pagination is included into an HTML page after clicking the OK button of the alert box. If I did not include any alert box in the below code, I'm unable to include the pagination due to above error.
<script>
$(document).ready(function() {
alert("Hello");
$("#ip").val('');
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
</script>
Can anyone please help me out regarding this issue?
You need to initialize your table once you are finished manipulating the
<table>
element and adding rows, i.e. after call totabulate()
.I would also put the code into handler for
ready
event, since you're accessing and manipulating DOM nodes.See updated Plunker for code and demonstration.