使用 Ajax 對表數據進行排序
[英]Sorting the table data using Ajax
問題描述
我想按字母順序對表格數據進行排序。 HTML 不需要再次重新加載。 JSON 數據托管在在線服務器上，單擊表格時可以添加按鈕，應按字母順序自動對“標題”列進行排序。
$(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 個解決方案
解決方案1
0 2019-11-06 03:25:19
我會做這樣的事情：
$(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>
使用tablekit對AJAX方法返回的表進行排序
[英]Using tablekit for Sorting a table that is returned from an AJAX method
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.