Sorting the table data using Ajax
Question
I want to sort the table data as alphabetical order. The HTML needs not to be reloaded again. The JSON data hosted on an online server, The button can be added when clicking the table should be sorted automatically with the column "title" alphabetically.
$(document).ready(function() { $.getJSON("my json file", function(data) { var movie_data = ''; $.each(data.movies, function(key, value) { movie_data += '<tr>'; movie_data += '<td>' + value.title + '</td>'; movie_data += '<td>' + value['imdb-id'] + '</td>'; movie_data += '<td>' + value.rank + '</td>'; movie_data += '<td>' + value.rating + '</td>'; movie_data += '<td>' + value['rating-count'] + '</td>'; movie_data += '<tr>'; }); $('#movie_table').append(movie_data); }); });
<:DOCTYPE html> <html> <head> <title>JSON data to HTML table</title> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min:js"></script> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min:css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="table-responsive"> <h1>TOP MOVIES</h1> <br /> <table class="table table-bordered table-striped" id="movie_table"> <tr> <th>Title</th> <th>IMDB-ID</th> <th>RANK</th> <th>RATING</th> <th>RATING-COUNT</th> </tr> </table> </div> </div> </body> </html>
1 answers
solution1
0 2019-11-06 03:25:19
I'd do something like this:
$(document).ready(function() { var data = null; $.getJSON("my json file", function(jsonData) { data = jsonData.movies; reloadTable(); }); $("#btn-sort").click(function() { data.sort(function(a,b) { return a.title < b.title? -1: 1; }); reloadTable(); }); function reloadTable() { var movie_data = ''; $.each(data.movies, function(key, value) { movie_data += '<tr>'; movie_data += '<td>' + value.title + '</td>'; movie_data += '<td>' + value['imdb-id'] + '</td>'; movie_data += '<td>' + value.rank + '</td>'; movie_data += '<td>' + value.rating + '</td>'; movie_data += '<td>' + value['rating-count'] + '</td>'; movie_data += '<tr>'; }); $('#movie_table').slice(1).remove(); // To remove everything except first row $('#movie_table').append(movie_data); } });
<:DOCTYPE html> <html> <head> <title>JSON data to HTML table</title> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min:js"></script> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min:css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="table-responsive"> <h1>TOP MOVIES</h1> <button id="btn-sort">Sort</button> <br /> <table class="table table-bordered table-striped" id="movie_table"> <tr> <th>Title</th> <th>IMDB-ID</th> <th>RANK</th> <th>RATING</th> <th>RATING-COUNT</th> </tr> </table> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Refresh the table data using Ajax after selecting a sorting option
Sorting Mysql table by ajax
How to disable server side ajax hit during sorting in data Table
Sorting HTML table by row data using Javascript
Sorting the table data using angular js
Sorting data from API to table using jQuery
Using tablekit for Sorting a table that is returned from an AJAX method
Combining Ajax with table sorting/filtering
Sorting Table with Hierarchical Data
Sorting Table by td data
Related Tags