Получение результатов, возвращаемых вызовом AJAX в реальном времени для сортировки

У меня есть начальная страница (program_finder.asp), которая делает AJAX-вызов для некоторых результатов:

        $('#filtersForm').submit(function(){
      $('#resultsPane').load('program_finder_backend.asp',$('#filtersForm').serializeArray());
      return false;

Это работает просто отлично. Я отправляю параметры, на серверной странице запускается некоторый SQL, и дампы в мою область результирующих панелей просто отлично. Возвращенная информация является таблицей.

Я хочу сделать таблицу возвращаемой информации сортируемой по столбцам. Мне нравится эта функция и я хочу ее использовать:

http://www.kryogenix.org/code/browser/sorttable/

Для таблицы с классом сортировки пользователь может щелкнуть заголовки столбцов, чтобы отсортировать содержимое. Я думаю, что это удобно для пользователя. он работает нормально, это статическая страница.

Я загружаю это с

  script src="sorttable.js"></script

в заголовке исходного документа.

Я почти уверен, что проблема в том, что возвращаемое содержимое таблицы не существует в DOM при начальной загрузке страницы, и поэтому sorttable.js не может их найти. Я почти уверен, что мне нужно.live() или.on() или.delegate() где-нибудь, чтобы сделать возвращаемые результаты таблицы видимыми для начальной страницы, но я не знаю, как это сделать.

Я думаю, что хочу что-то вроде:

 $('table.sortable').on('click', function(){
       // but here I don't know how to call sorttable();
        });

Если это не ясно, я добавлю больше информации.

РЕДАКТИРОВАТЬ: я должен был добавить, что сортируемая документация говорит это:

Сортировка таблицы добавлена ​​после загрузки страницы

Как только вы добавили новую таблицу на страницу во время выполнения (например, выполнив Ajax-запрос для получения содержимого или динамически создавая его с помощью JavaScript), получите ссылку на нее (возможно, с помощью var newTableObject = document.getElementById(idOfTheTableIJustAdded) или аналогичный), затем выполните следующее:

sorttable.makeSortable (newTableObject);

но это мне не поможет. Я не понимаю это

РЕДАКТИРОВАТЬ #2: Разместите это здесь, чтобы было легче читать. Я старался:

 $('#filtersForm').submit(function(){
     $('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
         sorttable.makeSortable($("#resultsPane").find("table")[0]);
      return false});
    });

на Догберта без удачи. Это переходит от начальной страницы непосредственно к внутренней странице.

EDIT # 3

Добавление в код Adeneo из ссылочной скрипки:

 $('#filtersForm').submit(function(e){
e.preventDefault();
$('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
     sorttable.makeSortable($(this).find("table").get(0));
});
});

Кажется, это работает. Я бы никогда этого не понял. Спасибо и Догберту.

Источник

3 ответа

Решение

Вам нужно будет запретить действие по умолчанию при отправке формы, загрузить таблицу, а затем получить таблицу в виде простого элемента DOM и передать ее makeSortable() функция, вот так:

$('#filtersForm').submit(function(e){
    e.preventDefault();
    $('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
         sorttable.makeSortable($(this).find("table").get(0));
    });
});​
Источник

Это должно работать:

$('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
  sorttable.makeSortable($("#resultsPane").find("table")[0]);
}
Источник

Думаю, что я опубликую это здесь, потому что это может кому-то помочь.

Sorttable прекрасно работает, пока вы не измените содержимое таблицы (возможно, через возврат AJAX), а затем он не будет знать об этом новом контенте и больше не будет сортировать должным образом.

Функция makeSortable (таблица) работает нормально, если вы закачиваете в нее свежую таблицу, поскольку sorttable теперь будет проходить через таблицу и делать ее сортируемой. Однако, если у вас есть существующая таблица, которая уже была обработана через makeSortable(table) - возможно, при загрузке страницы - к ячейкам заголовка этой таблицы уже может быть прикреплен обработчик сортируемого события, который просто вызовет у вас горе, если вы просто вызовете pass the table в makeSortable снова.

Это вызвало у меня сегодня немного хлопот с таблицей, содержащей изменяемый контент AJAX, и я понял, что для сортировки действительно нужна функция "перезагрузки" после ответа AJAX. Так вот

reload: function (table) {
  // get the head row and iterate each header cell
    headrow = table.tHead.rows[0].cells;
    for (var i=0; i<headrow.length; i++) {
        // use the provided removeEvent function to get rid of the current handler
        removeEvent(headrow[i], 'click', sorttable.innerSortFunction);

        // check if there is a currently sorted col and remove class
        if (headrow[i].className.search(/\bsorttable_sorted\b/) != -1) {
            headrow[i].className = headrow[i].className.replace('sorttable_sorted','');
        }
        if (headrow[i].className.search(/\bsorttable_sorted_reverse\b/) != -1) {
            headrow[i].className = headrow[i].className.replace('sorttable_sorted_reverse','');
        }
    }
    // remove any sort indicating arrows
    sortfwdind = document.getElementById('sorttable_sortfwdind');
    if (sortfwdind) { sortfwdind.parentNode.removeChild(sortfwdind); }
    sortrevind = document.getElementById('sorttable_sortrevind');
    if (sortrevind) { sortrevind.parentNode.removeChild(sortrevind); }
    // now we can make the table sortable with it's new content
    sorttable.makeSortable(table);
}

Просто поместите эту функцию в функцию shaker_sort в sorttable.js (не забывая запятую после последней фигурной скобки shaker_sort). Теперь, если вы измените содержимое ранее отсортированной таблицы, передайте его в reload для повторной сортировки:

sorttable.reload(document.getElementById('#MyTableID'));

Важный

Чтобы вышеуказанная функция перезагрузки работала, вы должны отключить функцию sorttable.innerSortFunction, чтобы она была доступна глобально, иначе обработчик события удаления не будет работать. Для этого просто вырежьте и вставьте innerSortFunction так, чтобы это была функция для sorttable, как reload и sort_shaker. После того, как вы вырезали и вставили функцию innerSortFunction, убедитесь, что она все еще присоединяется к заголовкам как обработчик событий, например:

dean_addEvent(headrow[i],"click", sorttable.innerSortFunction);
Источник
Другие вопросы по тегам