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

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

11 голосов
/ 18 февраля 2009

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

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

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

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

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

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

$(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>, на которое я должен ответить, что, конечно, не является частью Сам стол. Я попробовал несколько вариантов в надежде, что один из них поможет, но безрезультатно: - (

Ответы [ 8 ]

21 голосов
/ 23 декабря 2009

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

$("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; 
    }); 
});

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

4 голосов
/ 18 февраля 2009

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

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

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

3 голосов
/ 18 февраля 2009

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

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

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

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

Обновление. Я подготовил быстрый тестовый комплект, который, надеюсь, поможет. В верхней части находятся 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>jsmith@gmail.com</td><td>$50.00</td>
    <td>http://www.jsmith.com</td></tr><tr><td>Bach</td><td>Frank</td><td>fbach@yahoo.com</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>jjones@gmail.com</td> 
            <td>$100.00</td> 
            <td>http://www.jjones.com</td> 
        </tr> 
        <tr> 
            <td>French</td> 
            <td>Guy</td> 
            <td>gf@yahoo.com</td> 
            <td>$50.00</td> 
            <td>http://www.french.com</td> 
        </tr> 
        </tbody> 
        </table>
1 голос
/ 11 февраля 2012

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

$("#DivBeingUpdated").ajaxStop(function(){ 
    $("table").tablesorter()
});
0 голосов
/ 04 марта 2017

Я недавно столкнулся с этой проблемой. Решение Элвин не сработало для меня. Но эта тема предполагает, что проблема заключается в синхронизации функций при событиях "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]);
0 голосов
/ 22 декабря 2015

после вызова 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");
0 голосов
/ 09 июня 2009

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

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

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

0 голосов
/ 19 февраля 2009

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

...