Question

首先发布在这里！我目前有我的JSON文件，通过表格中的html显示我想要的方式。但是，就如何使这个表从我所处的位置排序而言，我完全迷失了。我已经在这2天了，观看视频和浏览网页，并认为我只需要寻求帮助。这是我到目前为止所拥有的......

抱歉：要澄清，我希望能够点击每个表格标题，然后按特定列排序：）

非常感谢你的时间！

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body class="col-md-12">
<div id="displayJSON">
    <p>Click Below to load zip.json!</p>
</div>

<a href="#getdata" class="btn btn-primary" id="btnGet">Display Data</a>
<script src="jquery-3.3.1.min.js"></script>

<script>
$(document).ready(function () {
$('#btnGet').click(function () {

var displayResources = $('#displayJSON');

    displayResources.text('Loading data from the given zip.json');

    $.ajax({type: "GET", url: "zip.json", success: function(result){
        console.log(result);
        var output="<table><thead><tr><th>City</th><th>Population</th><th>State</th><th>Zip</th></thead><tbody>";
            for (var i in result){
            output+="<tr><td>" + result[i].city + "</td><td>" + result[i].pop + "</td><td>" + result[i].state + "</td><td>" + result[i]._id + "</td></tr>";
            }

            output+="</tbody></table>";

            displayResources.html(output);
            $("table").addClass("table");
    }});

});
});
</script>

Answer 1

为每个表头写入4个排序函数（如果排序方式不一样）。首先对数组进行排序，然后重新创建并将表重新添加到html。

你的th

<th onclick="sortA()">...</th>

以及排序方法的一个例子：

function sortA() {
    arr.sort(a, b) {
        ...
    }
    // re-create and re-add table to html
}

Answer 2

您可以使用bootstrap表插件进行服务器端处理，它将获取json数据并为您创建表，您可以配置表进行排序，搜索，选择行等。请参阅bootstrap表examples和{ {3}}

Answer 3

不要直接在AJAX调用中生成表，而是编写tableRender(array)函数。

应该使用AJAX调用填充数组，然后渲染函数将循环遍历数组并生成表。

如果要对列进行排序，请为这些标题元素添加事件侦听器，这将触发数组上的排序函数，然后使用新数据调用render table函数。

JSON到一个可排序的表？

3 个答案: