使用tablesorter jquery插件对HTML表格进行排序答案

【问题标题】：Sorting HTML table using tablesorter jquery plugin使用tablesorter jquery插件对HTML表格进行排序
【发布时间】：2015-10-28 07:01:30
【问题描述】：

我使用 javascript 将 json 从 cartodb 转换为 HTML 表。现在我正在尝试使用 Table sorter Jquery Plugin 制作可排序的表。我在我的代码中使用了 Tablesorter，但我无法在结果中得到任何排序。下面是我的代码，

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

【问题讨论】：

标签： javascript jquery tablesorter

【解决方案1】：

有几件事可能会导致您的问题：

首先，您指向jQuery UI 的链接存在错误 - 您缺少http:。

其次，您的脚本在第 57 行有语法错误 - 有一个额外的 }。

如果你检查浏览器控制台，它会告诉你这些事情。

最后，您需要像这样致电.tablesorter()（更多详情请参阅我的最终评论）：

$("#excelDataTable > table").tablesorter();

【讨论】：

我添加了丢失的 http: 并且额外的 } 也被删除了。但我仍然可以在浏览器中显示表格，但不能使用排序功能。
它现在做什么？控制台上是否有任何消息？也许您可以使用 AJAX 调用返回的 JSON 样本来编辑帖子。
控制台中没有显示错误。我已将结果表作为快照上传到浏览器中。
另外两件事：您的样式表 URL 中有一个错误。而且 - 这就是问题所在 - 您在包含 div 元素的 ID 上调用 .tablesorter()，而不是在 table 元素上。（顺便说一句，只需将表名附加到 AJAX API 查询中，您就会受到 SQL 注入攻击。）