Ajax无刷新PHP排序表格异常：需两次触发/分页后跳回首页

让我来帮你排查这两个问题的根源，以及对应的修复方案：

问题1：第一页点击两次才触发排序 #

原因分析 #

你的代码逻辑是先发送当前的排序参数，再在请求成功后切换排序值。假设初始时input[name="order_by"]的默认值是ASC：

• 第一次点击：发送的排序参数是ASC，后端返回的还是升序结果，请求完成后才把输入框的值改成DESC
• 第二次点击：发送的是更新后的DESC参数，后端返回降序结果，这时候你才会看到排序变化

说白了，第一次点击只是“预约”了下一次的排序方向，并没有真正改变本次请求的排序规则，所以看起来需要点击两次才生效。

修复方案 #

调整逻辑，先确定要发送的新排序方向，更新输入框后再发起请求，修改JS代码如下：

$(document).ready(function() {
  // 改用事件委托，避免重新渲染后点击事件失效
  $(document).on('click', '#sorter', function(e) {
    e.preventDefault(); // 必须打开，阻止a标签的默认跳转行为
    var current_order = $('input[name="order_by"]').val();
    // 先计算要使用的新排序方向
    var new_order = current_order === "ASC" ? "DESC" : "ASC";
    // 先更新页面上的排序值存储
    $('input[name="order_by"]').val(new_order);
    // 获取当前页码（后面会用到，解决跳页问题）
    var current_page = $('input[name="current_page"]').val() || 0;

    $.ajax({
      type: 'GET',
      url: "http://test.local/ajax-data.php?action=getBooks",
      data:{
        'order_by_value': new_order,
        'start': current_page // 传递当前页码给后端
      },
      success: function (res) {
        console.log(res);
        $("#myTable").html(res);
      }
    });
  });
});

问题2：非首页点击排序跳回第一页 #

原因分析 #

你的getBooks方法默认$start = 0（也就是第一页的起始偏移量），但当前端在非首页发起排序请求时，没有把当前页面的页码/偏移量传递给后端，所以后端每次都会从第0条数据开始查询，自然就跳回第一页了。

修复方案 #

需要完整传递当前页面的状态给后端，步骤如下：

1. 在页面中存储当前页码：
   添加一个隐藏输入框来记录当前所在的页码（分页切换时要同步更新这个值）：

   <input type="hidden" name="current_page" value="0">
   

2. 修改后端接收参数：
   更新ajax-data.php，接收前端传递的start和排序参数，再传给getBooks方法：

   <?php
   include_once('UUser.php');
   session_start(); // 别忘了开启session，不然$_SESSION['username']拿不到
   if(isset($_GET['action']) ) {
     $object = new User();
     switch($_GET['action']) {
       case "getBooks":
         $object->setUserName($_SESSION['username']);
         // 获取前端传递的页码，默认0（第一页）
         $start = isset($_GET['start']) ? (int)$_GET['start'] : 0;
         // 获取前端传递的排序规则，默认ASC
         $order = isset($_GET['order_by_value']) ? $_GET['order_by_value'] : "ASC";
         // 把参数传递给getBooks方法
         $object->getBooks($start, 2, $order);
         break;
       default:
         echo('there is no action');
         break;
     }
   }
   ?>
   

3. 补充小细节：
   你的getBooks方法中$sql_start = $start * $limit;的逻辑是正确的（假设$start是页码，比如0=第一页，1=第二页），不需要修改。

额外注意点 #

因为每次ajax请求都会重新渲染#myTable里的内容，包括#sorter链接，所以我把原来的$("#sorter").click()改成了事件委托$(document).on('click', '#sorter', ...)，这样新生成的排序链接也能正常触发点击事件，避免多次排序后点击失效的问题。

内容的提问来源于stack exchange，提问作者Second View