Плагин jQuery tablesorter не работает после вызова AJAX

Question

Я использовал jQuery table sorter plugin в своем коде. Он отлично работает, пока я не делаю запрос ajax для динамического загрузки данных таблицы. Я использую комбинированные поля для фильтрации содержимого таблицы с помощью ajax. Я прочитал несколько сообщений, которые говорят, что использование $("table").trigger("update"); может решить мою проблему. Я попробовал это с моим кодом, но проблема все еще там.

Есть ли другой способ решить эту проблему? Пожалуйста, помогите мне разобраться в решении. Я действительно застрял плохо. Любая помощь будет оценена по достоинству. Ниже мой код:

$(document).ready(function() { 
    $("#myTable").tablesorter({ 
     widthFixed: true, 
     widgets: ['zebra'], 
     headers: { 
      0: { 
       sorter: false 
      } 
     } 
    }).tablesorterPager({ 
     container: $("#pager") 
    }); 

    $("#tag").change(function (event) { 
     $('#myTable').trigger("update"); 
     $("#myTable").tablesorter(); 
    }); 
}); 

Здесь тег идентификатор в поле со списком с именем тега и MYTABLE является идентификатор таблицы с сортировщик пейджера плагин.

Answer 1

Непонятно, какой механизм вы используете для вызова AJAX, но если это ASP.NET UpdatePanel, то после завершения вызова AJAX вам нужно будет перестроить ваши события jQuery.

Добавьте следующую строку в ваш сценарий

var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_beginRequest(function(sender, args) { 
    // Code to rebind your UI 
}); 

Примечание: работает только если вы используете ASP.NET AJAX

Answer 2

Проблема заключается в том, что вы звоните в $('#myTable').trigger("update"); код, когда изменяется поле со списком , а не когда вы получите ответ от вашего запроса AJAX. Если вы используете ASP.NET AJAX, попробуйте ввести код ericphan. Если вы используете JQuery AJAX, попробовать что-то вроде этого:

$.get('http://site.com/request-address', function(data) { 

    // Code you're using to replace the contents of the table 

    // Code to rebind the tablesorter 
    $('#myTable').trigger("update"); 
    $("#myTable").tablesorter(); 
}); 

Таким образом, вы повторно связав TableSorter нового содержания таблицы, а не старое содержимого, которые будут заменять.

Answer 3

Новые элементы DOM не привязаны к событиям JavaScript. jQuery обрабатывает аналогичную проблему, используя ее «живую» функцию. Как только вызов AJAX завершится, запустите javascript в документе document.ready().

Answer 4

Я бы обернул функцию tablesorter в ее собственную функцию.

Тогда, когда вам нужно снова запустить его - просто позвоните ему снова.

$(document).ready(function() { 
    function resortTable(){ 
      $("#myTable").tablesorter({ 
      widthFixed: true, 
      widgets: ['zebra'], 
      headers: { 
       0: { 
        sorter: false 
       } 
      } 
     }).tablesorterPager({ 
      container: $("#pager") 
     }); 
    } 

     $("#tag").change(function() { 
      resortTable(); 
     }); 
}); 

Answer 5

я хотел бы посмотреть в использовании livequery плагин для этого ... она творит чудеса

http://docs.jquery.com/Plugins/livequery

Answer 6

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

$('#myTable').tablesorter(); 

еще раз после моего вызова AJAX.