Javascript 使用TableSorterjQuery插件对HTML表进行排序
我使用javascript将json从cartodb转换为HTML表。现在我正尝试使用TableSorterjQuery插件制作一个可排序的表。我在代码中使用了Tablesorter,但无法在结果中获得任何排序。下面是我的代码Javascript 使用TableSorterjQuery插件对HTML表进行排序,javascript,jquery,tablesorter,Javascript,Jquery,Tablesorter,我使用javascript将json从cartodb转换为HTML表。现在我正尝试使用TableSorterjQuery插件制作一个可排序的表。我在代码中使用了Tablesorter,但无法在结果中获得任何排序。下面是我的代码 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> &
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/jquery.tablesorter.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
<style>
canvas {
height: 400px;
margin: 5px;
width: 1500px;
}
</style>
</head>
<body>
<div id="excelDataTable">
</div>
<script>
$(function () {
data2 = "carto";
json_link = 'http://development.localhost.lan:8080/api/v2/sql?q=SELECT * FROM ' + data2;
$.getJSON(json_link, function (result) {
var th_main = "";
for (var e in result['fields']) {
th_main = th_main + '<th>' + e + '</th>';
}
var table_header = '<thead>' +
'<tr>' +
th_main +
'</tr>' +
'</thead>';
var body_main = "";
for (var i = 0; i < result['rows'].length; i++) {
var tr = "<tr>";
for (var ele in result['rows'][i]) {
tr = tr + '<td>' + result['rows'][i][ele] + '</td>';
}
var tr = tr + "</tr>";
body_main = body_main + tr;
}
var table_body = '<tbody>' + body_main + '</tbody>';
var table = "<table class='table table-bordered table-hover table-condensed table-striped'>" + table_header + table_body + "</table>";
$("#excelDataTable").html(table);
$(document).ready(function() {
$("#excelDataTable").tablesorter();
}
);
});
}
}
);
});
</script>
</body>
有几件事可能会导致您的问题: 首先,到jQuery UI的链接中有一个错误-您缺少http: 第二,您的脚本在第57行有一个语法错误-有一个额外的} 如果你检查浏览器控制台,它会告诉你这些事情 最后,您需要调用.tablesorter,如需了解更多详细信息,请参阅我的最后评论:
$excelDataTable>table.tablesorter 我已经添加了丢失的http:,额外的}也被删除了。但我仍然可以在浏览器中显示表格,但没有排序功能。它现在做什么?控制台上有消息吗?也许您可以使用AJAX调用返回的JSON示例来编辑文章。控制台中没有显示任何错误。我已将生成的表作为快照上传到浏览器中。还有两件事:您的一个样式表URL中有错误。这就是问题所在,您是在包含div元素的ID上调用.tablesorter,而不是在table元素上调用。另一方面,只需将表名附加到AJAX API查询中,您就会受到SQL注入攻击。