mysql 横向展示

<!-- HTML 部分 -->
<table id="data-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据将通过 AJAX 动态加载到这里 -->
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  function loadData(page) {
    $.ajax({
      url: 'load-data.php',
      type: 'GET',
      data: { page: page },
      success: function(data) {
        $('#data-table tbody').html(data);
      }
    });
  }

  // 初始加载第一页数据
  loadData(1);
});
</script>

<!-- HTML 部分 -->
<table id="data-table">
  <thead>
    <tr>
      <th data-sort="id">ID</th>
      <th data-sort="name">Name</th>
      <th data-sort="age">Age</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据将通过 AJAX 动态加载到这里 -->
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  function loadData(sortBy) {
    $.ajax({
      url: 'load-data.php',
      type: 'GET',
      data: { sortBy: sortBy },
      success: function(data) {
        $('#data-table tbody').html(data);
      }
    });
  }

  $('#data-table th').click(function() {
    var sortBy = $(this).data('sort');
    loadData(sortBy);
  });

  // 初始加载数据，不排序
  loadData('');
});
</script>