JSON to a sortable table?

Question

first post here! I currently have my JSON file to display exactly how I want it to via html in a table. However, I am completely lost in terms of how to make this table to be sorted from the point I am at. I have been at this for 2 days now, watching videos and browsing the web, and thought I just need to ask for help. Here's what I have so far...

Sorry: To Clarify, I want to be able to click each table header, and it sorts by that specific column :)

THANKS SO MUCH FOR YOUR TIME!

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

maybe you can use this, [here](https://www.datatables.net/examples/data_sources/ajax) — dadan, Apr 10 '18 at 03:52
Possible duplicate of [jQuery table sort](https://stackoverflow.com/questions/3160277/jquery-table-sort). Please see there for an answer to your question. Also, [Handsontable](https://handsontable.com/examples?manual-resize&manual-move&conditional-formatting&context-menu&filters&dropdown-menu&headers&sorting) has a very nice excel-like feel + features, for more advanced users. Voting to close this question — Edwin Chua, Apr 10 '18 at 03:55

score 0 · Answer 1 · answered Apr 10 '18 at 04:54

Write 4 sort function for each table header(if the way of sorting is not the same). Sort your array first and then re-create and re-add your table to html.

your ths

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

and an example of sort methods:

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

score 0 · Answer 2 · answered Apr 10 '18 at 05:00

0

You can use bootstrap table plugin for server side processing, it will get json data and makes table for you, you can configure table for sorting, searching, selecting rows and etc. Please see bootstrap table examples and documentation

answered Apr 10 '18 at 05:00

Shota Noniashvili

109
9

score 0 · Answer 3 · answered Apr 10 '18 at 05:04

Instead of generating the table directly in the AJAX call, write a tableRender(array) function.

The array should be populated with the AJAX call, and then the render function would loop over the array and generate the table.

If you want to sort a column, add event listeners for those header elements, which would fire a sort function on the array, and subsequently, call the render table function with the new data.

JSON to a sortable table?

3 Answers3