使用Ajax对表数据进行排序

2024-05-04 • 问答

我想按字母顺序对表数据进行排序。 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>

我会做这样的事情：

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

使用Ajax对表数据进行排序

zjhsir123 回答：使用Ajax对表数据进行排序

大家都在问