无法在html中包含jquery.dataTables.min.js [英] Unable to include jquery.dataTables.min.js in html
问题描述
我的代码：
<!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>
我无法将此插件添加到我的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>
我在firebug中面临以下错误，
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)
由于这个错误我无法在我的HTML页面中包含分页，它的作用是像这样现在我还想添加分页进入我的HTML页面。
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.
实际上，在下面的代码中，如果我包含一个警告框，则在单击警告框的确定按钮后，将分页包含在HTML页面中。如果我在下面的代码中没有包含任何警报框，我无法包含上述错误的分页。
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?
推荐答案
解决方案
您完成操作< table> 元素并添加行后即调用 tabulate（）。
You need to initialize your table once you are finished manipulating the <table> element and adding rows, i.e. after call to tabulate().
d3.csv('getcsv', function(data) {
var columns = ['client_ip']
tabulate(data, columns)
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
我也将代码放在准备好的处理程序事件，因为您正在访问和操作DOM节点。
I would also put the code into handler for ready event, since you're accessing and manipulating DOM nodes.
DEMO
请参阅更新的Plunker 用于代码和演示。
See updated Plunker for code and demonstration.
这篇关于无法在html中包含jquery.dataTables.min.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
