Я хочу сохранить состояние сортировки JQuery при переходе на новую страницу - PullRequest
Новая
       18

Я хочу сохранить состояние сортировки JQuery при переходе на новую страницу

0 голосов
/ 13 мая 2011

В основном у меня есть следующие вещи:

  1. Таблица, которая сортируется с помощью JQuery и обновляется с помощью Ajax
  2. Скрытый объект, в котором хранится состояние сортировки (имя столбца) +(ASC или DESC)
  3. Метод JQuery, который заканчивается бесконечным циклом вызовов Ajax

Я хочу:

  1. Чтобы можно было использовать will_paginate, перейдите на новую страницу и поддерживайте сортировку пользователей.
  2. Я почти на месте.Мне просто нужна твоя помощь;Я новичок в 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);
    });
});

1 Ответ

1 голос
/ 13 мая 2011

Вторая функция должна выполняться только один раз, когда страница загружается, верно?

Таким образом, вместо $('.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: sort-sort), поэтому я изменил только одно место хранения.
...