点击Books链接切换排序后页面未更新，需触发分页按钮才生效的问题

你这个问题的核心原因一目了然：你的AJAX请求成功拿到了后端返回的排序后书籍列表，但完全没把新内容更新到页面DOM里——只有分页按钮触发时才会重新渲染页面，所以你看不到即时的排序效果。

咱们拆解下问题所在：

• 点击#sorter链接时，AJAX确实发送了请求，后端也返回了新的表格HTML（你通过console.log(res)能看到）
• 但success回调里只做了两件事：切换隐藏input的order_by值、打印日志
• 完全没有把后端返回的res（也就是排序后的完整表格）替换到页面的对应位置，页面自然不会有任何变化

修复步骤 #

1. 给表格添加容器（如果还没有的话）

先在页面里给书籍表格套一个固定的容器，方便后续替换内容：

<div id="book-table-container">
  <!-- 后端渲染的书籍表格会放在这里 -->
</div>

2. 修改AJAX的success回调，更新页面DOM

在回调里加入DOM更新的逻辑，把后端返回的新表格直接替换到容器中：

$(document).ready(function() {
 $("#sorter").click(function(e) {
 e.preventDefault();
 var order_by_value = $('input[name="order_by"]').val();
 $.ajax({
 type: 'GET',
 url: "http://test.local/UUser.php?action=getBooks",
 data:{
 'order_by_value': order_by_value,
 },
 success: function (res) {
 console.log(res);
 // 关键：把返回的新表格HTML替换到页面容器中
 $('#book-table-container').html(res);

 // 保留原有的排序方向切换逻辑
 if(order_by_value === "ASC"){
 $('input[name="order_by"]').val("DESC");
 } else {
 $('input[name="order_by"]').val("ASC");
 }
 }
 });
 });
});

3. 额外检查：后端是否正确接收排序参数

你的getBooks函数有$order参数（默认值ASC），要确保在处理action=getBooks的逻辑中，正确从AJAX传递的order_by_value获取值，比如：

// 在处理action=getBooks的控制器逻辑里
$order = $_GET['order_by_value'] ?? "ASC";
// 调用getBooks时传入排序参数
$this->getBooks(0, 2, $order);

如果这里没做处理，后端会一直使用默认的ASC排序，那你的排序请求等于白发送了。

这样修改后，点击Books链接时，AJAX会立刻把排序后的表格内容更新到页面上，你不用再点击分页按钮就能看到排序效果了。

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