Подтвердить что ты не робот

JQuery tablesorter - потеря функциональности после вызова AJAX

Недавно я экспериментировал с плагином tablesorter для jQuery. Я успешно поднял его и запустил в одном экземпляре, и я очень впечатлен. Тем не менее, я попытался применить tablesorter к другой таблице, только чтобы столкнуться с некоторыми трудностями...

В основном таблица, вызывающая проблему, имеет над ней <ul>, которая действует как набор вкладок для таблицы. поэтому, если вы нажмете на одну из этих вкладок, будет сделан вызов AJAX, и таблица будет заселена строками, относящимися к выбранной вкладке. Когда страница изначально загружается (т.е. До того, как была нажата вкладка), функция tablesorter работает точно так, как ожидалось.

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

Я видел решение, похожее на мою проблему на этом сайте, и кто-то рекомендует использовать плагин jQuery, livequery. Я пробовал это, но безрезультатно: - (

Если у кого-то есть предложения, я буду очень благодарен. Я могу опубликовать фрагменты кода, если это поможет (хотя я знаю, что код создания для tablesorter отлично работает, когда он работает с таблицами без вкладок - так что это определенно не так!)

EDIT: В соответствии с запросом, вот некоторые фрагменты кода:
Сортировка таблицы <table id="#sortableTable#">..</table>, код экземпляра для tablesorter, который я использую:

$(document).ready(function() 
{ 
    $("#sortableTable").tablesorter(
    {
        headers: //disable any headers not worthy of sorting!
        {
            0: { sorter: false },
            5: { sorter: false }
        },
        sortMultiSortKey: 'ctrlKey',
        debug:true,
        widgets: ['zebra']
    }); 
});

И я попытался настроить livequery следующим образом:

$("#sortableTable").livequery(function(){
   $(this).tablesorter();
});

Это не помогло, хотя... Я не уверен, следует ли использовать идентификатор таблицы с livequery, поскольку это щелчок на <ul>, на который я должен отвечать, что, конечно, не является частью таблицы. Я попробовал несколько вариантов в надежде, что один из них поможет, но безрезультатно: - (

4b9b3361

ОТВЕТЫ

Ответ 1

После добавления ваших данных сделайте следующее:

$("your-table").trigger("update"); 
var sorting = [[0,0]]; 
$("your-table").trigger("sorton",[sorting]);

Это позволит плагину знать, что у него есть обновление, и пересортировать его.

Полный пример, приведенный в документе:

$(document).ready(function() { 
    $("table").tablesorter(); 
    $("#ajax-append").click(function() { 
         $.get("assets/ajax-content.html", function(html) { 
             // append the "ajax'd" data to the table body 
             $("table tbody").append(html); 
            // let the plugin know that we made a update 
            $("table").trigger("update"); 
            // set sorting column and direction, this will sort on the first and third column 
            var sorting = [[2,1],[0,0]]; 
            // sort on the first column 
            $("table").trigger("sorton",[sorting]); 
        }); 
        return false; 
    }); 
});

Из документа tablesorter: http://tablesorter.com/docs/example-ajax.html

Ответ 2

Вы пробовали позвонить

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

после кода, где вы обрабатываете щелчок на вкладке и повторно заполняете таблицу??? Если нет, попробуйте попробовать.

Ответ 3

Возможно, что, когда ваша вторая таблица создана с помощью ajax, вам нужно перестроить события. Возможно, вы захотите использовать плагин LiveQuery

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

который может "автомагически" помочь с вашей проблемой.

Изменить: извините, просто перечитайте свой пост и увидите, что вы уже это пробовали.

Обновить. Я подстроил быстрый тестовый жгут, который, надеюсь, поможет. В верхней части находятся 3 LI, каждый из которых имеет другой способ обновления содержимого таблицы. Последний обновляет содержимое и сохраняет порядок

    <script src="jquery-1.3.js"  type="text/javascript" ></script>
    <script src="jquery.livequery.js"  type="text/javascript" ></script>
    <script src="jquery.tablesorter.min.js" type="text/javascript" ></script>

<script>

var newTableContents = "<thead><tr><th>Last Name</th><th>First Name</th>
<th>Email</th><th>Due</th><th>Web Site</th></tr></thead>
<tbody><tr><td>Smith</td><td>John</td><td>[email protected]</td><td>$50.00</td>
    <td>http://www.jsmith.com</td></tr><tr><td>Bach</td><td>Frank</td><td>[email protected]</td>
<td>$50.00</td><td>http://www.frank.com</td></tr></tbody>";


 $(document).ready(function() 
    { 
        $("#addData").click(function(event){
        $("#sortableTable").html(newTableContents);
    });

    $("#addLivequery").livequery("click", function(event){
        $("#sortableTable").html(newTableContents);
    });

    $("#addLiveTable").livequery("click", function(event){
        $("#sortableTable").html(newTableContents);
        $("#sortableTable").tablesorter( { } ); 
    });

    $("#sortableTable").tablesorter( { } ); 
  });
</script>

        <ul>
            <li id="addData" style="background-color:#ffcc99;display:inline;">Update Table</li>
            <li id="addLivequery" style="background-color:#99ccff;display:inline;">Update Table with livequery</li>
            <li id="addLiveTable" style="background-color:#99cc99;display:inline;">Update Table with livequery & tablesorter</li> 
        </ul>

        <hr />
        <table id="sortableTable"> 
        <thead> 
        <tr> 
            <th>Last Name</th> 
            <th>First Name</th> 
            <th>Email</th> 
            <th>Due</th> 
            <th>Web Site</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr> 
            <td>Jones</td> 
            <td>Joe</td> 
            <td>[email protected]</td> 
            <td>$100.00</td> 
            <td>http://www.jjones.com</td> 
        </tr> 
        <tr> 
            <td>French</td> 
            <td>Guy</td> 
            <td>[email protected]</td> 
            <td>$50.00</td> 
            <td>http://www.french.com</td> 
        </tr> 
        </tbody> 
        </table>

Ответ 4

Используйте функцию ajaxStop, и код будет запущен после завершения вызова ajax.

$("#DivBeingUpdated").ajaxStop(function(){ 
    $("table").tablesorter()
});

Ответ 5

Оказывается, мне пришлось внести некоторые изменения в связанный с AJAX код для повторного вызова $("#myTable").tablesorter(..) после вытаскивания любых данных...

Ответ 6

У меня была такая же проблема, за исключением того, что я загружал таблицу со строкой для каждой категории, а затем вставлял данные для каждой категории в таблицу, используя асинхронные вызовы. Вызов $("#myTable").tablesorter(..) после возврата каждой записи заставлял мой браузер бомбить, когда загружалось больше тривиального количества записей.

Моим решением было объявить две переменные, totalRecords и fetchedRecords. В $(document).ready() я устанавливал значение totalRecords в $("#recordRows").length;, и каждый раз, когда я заполняю запись в таблице, переменная fetchedRecords увеличивается и если fetchedRecords >= totalRecords, то я вызываю $("#myTable").tableSorter(..).

Хорошо работает для меня. Конечно, ваш пробег может меняться.

Ответ 7

после вызова ajax при изменении содержимого html, которое необходимо обновить TableSorter.

ПОПРОБУЙТЕ ЭТО ДЛЯ РАБОТЫ ОК

если вы добавляете html

$("table tbody").append(html); 
        // let the plugin know that we made a update 
        $("table").trigger("update"); 
        // set sorting column and direction, this will sort on the first and third column 
        var sorting = [[2,1],[0,0]]; 
        // sort on the first column 
        $("table").trigger("sorton",[sorting]);

и при добавлении нового html вместо старого

$("table").trigger("update");
$("table").trigger("sorton");

Ответ 8

Недавно я столкнулся с этой проблемой. Решение elwyn не помогло мне. Но этот раздел предположил, что проблема заключается в синхронизации функций в событиях "update" и "sorton".

Если вы посмотрите в коде исходного кода jQuery Tablesorter 2.0 (вер. 2.0.5b), вы увидите что-то вроде:

$this.bind("update", function () {
    var me = this;
    setTimeout(function () {
        // rebuild parsers.
        me.config.parsers = buildParserCache(me, $headers);
        // rebuild the cache map
        cache = buildCache(me);
    }, 1);
}).bind("sorton", function (e, list) {
    $(this).trigger("sortStart");
    config.sortList = list;
    // update and store the sortlist
    var sortList = config.sortList;
    // update header count index
    updateHeaderSortCount(this, sortList);
    // set css for headers
    setHeadersCss(this, $headers, sortList, sortCSS);
    // sort the table and append it to the dom
    appendToTable(this, multisort(this, sortList, cache));
});

Таким образом, проблема заключается в том, что setTimeout делает менее вероятным, что обновление будет закончено перед сортировкой. Моим решением было реализовать еще одно событие "updateSort", чтобы код выше:

var updateFunc = function (me) {
    me.config.parsers = buildParserCache(me, $headers);
    cache = buildCache(me);
};
var sortFunc = function (me, e, list) {
    $(me).trigger("sortStart");
    config.sortList = list;
    var sortList = config.sortList;
    updateHeaderSortCount(me, sortList);
    setHeadersCss(me, $headers, sortList, sortCSS);
    appendToTable(me, multisort(me, sortList, cache));
};
$this.bind("update", function () {
    var me = this;
    setTimeout(updateFunc(me), 1);
}).bind("sorton", function(e, list) {
    var me = this;
    sortFunc(me, e, list);
}).bind("updateSort", function (e, list) {
    var me = this;
    updateFunc(me);
    sortFunc(me, e, list);
});

После обновления данных в вашей таблице вам придется запускать только это новое событие:

var sorting = [[0,0]]; 
$("#your-table").trigger("updateSort",[sorting]);