当我转到新页面时，我想保持 JQuery 排序状态答案

【问题标题】：I want to maintain JQuery Sort state, when I go to a new page当我转到新页面时，我想保持 JQuery 排序状态
【发布时间】：2011-05-13 05:43:20
【问题描述】：

基本上我有以下几点：

使用 JQuery 排序并使用 Ajax 刷新的表
存储排序状态（列名）+（ASC 或 DESC）的隐藏对象
以 Ajax 调用无限循环结束的 JQuery 方法

我想要：

要能够使用 will_paginate，请导航到新页面并保持用户选择的排序。
我快到了。我只需要你的帮助；我是 JQuery/Ajax 新手

这是我的代码。第一种方法，效果很好。第二个让我陷入无限循环。提前感谢您的帮助！

$('.overview_table_header').click(function() {
    header = $(this)
    var col2 = $.trim($(this).text())
    var sort2 = header.data('sort')
    $.get("/sort", {
        col: $.trim($(this).text()),
        sort: header.data('sort')
    }, function(data) {
        $('#pages').html(data.html);
        header.data('sort', data.sort);
    });
    $(".secretdata").data("test", {
        first: sort2,
        last: col2
    });
    $(".secretdata h2:first").text($(".secretdata").data("test").first);
    $(".secretdata h2:last").text($(".secretdata").data("test").last);
});


$('.overview_table_header').ready(function() {
    header = $('.overview_table_header')
    var col = $(".secretdata h2:first")
    var sort = $(".secretdata h2:last")

    $.get("/sort", {
        col: col,
        sort: sort
    }, function(data) {
        $('#pages').html(data.html);
        header.data('sort', data.sort);
    });
});

【问题讨论】：

标签： jquery ajax infinite-loop

【解决方案1】：

第二个函数应该只执行一次，当页面加载时，对吧？

所以不要使用$('.overview_table_header').ready(function() {，而是使用$(function() {，它是document.ready/document.onLoad 的缩写。

循环可能正在发生，因为 ajax 回调更改了 '.overview_table_header' 中的某些内容，再次触发了 .ready()。

我会重写代码如下：

$('.overview_table_header').click(function() {
  sort($(this))
});

$(function() { // when page is loaded
  sort()
});

sort(param) {
  var col, dir;
  dir= $("#sortDirection").val(); 
  if (!param) { // first run
      col = $("#sortColumn").val();
  } else { 
      col = $.trim(param.text()); // This is dangerous! (1)
      $("#sortColumn").val(col);
  }
  $.get("/sort", { col: col, sort: dir},
    function(data) {
      $('#pages').html(data.html);
      $("#sortDirection").val(data.sort);
    }
  );
});

秘密数据会变成这样：

<input type="hidden" id="sortColumn" name="sortColumn" value="date" />
<input type="hidden" id="sortDirection" name="sortColumn" value="asc" />

一些注意事项：

不要使用 secretdata/first/last 之类的名称来存储您的变量，将来处理此代码的人会非常困惑（甚至是您，几个月后）。
您最好将这些内容存储在隐藏输入中，如果您提交表单，它们甚至会自动传播
(1) 从$.trim(param.text()); 获取列名是危险的，您最好在data-columnName 属性中传递规范化的列名，然后使用.data("columnName") 检索它
我不明白你为什么将方向存储两次（secredata 和 header:data-sort），所以我只更改了一个存储位置。

【讨论】：