Обновление плагина jQuery Tablesorter после удаления строки из DOM

Ответ 1

Я нашел решение, которое сработало для меня:

var usersTable = $(".tablesorter");
usersTable.trigger("update")
  .trigger("sorton", [usersTable.get(0).config.sortList])
  .trigger("appendCache")
  .trigger("applyWidgets");

Поместите это после того места, где вы отредактировали таблицу.

Ответ 2

После некоторых проблем с этой проблемой я заканчиваю проблемы возникают из комбинированного использования jQuery Tablesorter + jQuery TablesorterPager. Из-за того, что пейджер удаляет строку и делает, и "обновление" достаточно.

Когда вы также включаете пейджер, гораздо труднее сделать это правильно (как вы правильно заметили, есть некоторые проблемы с кешированием).

Но основной причиной вашей проблемы является то, что jQuery Tablesorter не считается используемым для таблиц, которые вы намерены модифицировать (в смысле добавления/удаления строк). И это применяется даже больше, когда вы дополнительно используете TablesorterPager. Просто перечитайте описание jQuery Tablesorter

tablesorter - это плагин jQuery для превращение стандартной таблицы HTML с Теги THEAD и TBODY в сортируемые таблица без обновления страницы.

Ясная и краткая область применения TableSorter. Он даже не упоминает ajax, редактирует, удаляет, добавляет,..... или подобные условия на странице. Это только для сортировки статической таблицы.

Итак, фактическое решение... начните искать еще один плагин jQuery "Таблица", который был построен с самого начала с намерением/возможностью изменения таблицы. И который поддерживает это по умолчанию (удаление, добавление,....)

Хорошо, тем не менее, это решение для:

jQuery Tablesorter + TablesorterPager удаляет строки (TR)

Быстрая копия исходного кода javascript (HTML на основе Пример TablesorterPager)

// "borrowed" from John Resig: Javascript Array Remove
// http://ejohn.org/blog/javascript-array-remove/
Array.prototype.remove = function(from, to) {
    var rest = this.slice((to || from) + 1 || this.length);
    this.length = from < 0 ? this.length + from : from;
    return this.push.apply(this, rest);
};

//repopulate table with data from rowCache
function repopulateTableBody(tbl) {
    //aka cleanTableBody from TableSorter code
    if($.browser.msie) {
        function empty() {
            while ( this.firstChild ) this.removeChild( this.firstChild );
        }
        empty.apply(tbl.tBodies[0]);
    } else {
        tbl.tBodies[0].innerHTML = "";
    }
    jQuery.each(tbl.config.rowsCopy, function() {
        tbl.tBodies[0].appendChild(this.get(0));
    });
}
//removes the passed in row and updates the tablesorter+pager
function remove(tr, table) {
    //pager modifies actual DOM table to have only #pagesize TR's
    //thus we need to repopulate from the cache first
    repopulateTableBody(table.get(0));
    var index = $("tr", table).index(tr)-2;
    var c = table.get(0).config;
    tr.remove();
    //remove row from cache too
    c.rowsCopy.remove(index);
    c.totalRows = c.rowsCopy.length;
    c.totalPages = Math.ceil(c.totalRows / config.size);
    //now update
    table.trigger("update");
    //simulate user switches page to get pager to update too
    index = c.page < c.totalPages-1;
    $(".next").trigger("click");
    if(index)
        $(".prev").trigger("click");
}

$(function() {
    var table;
    //make all students with Major Languages removable
    $('table td:contains("Languages")').css("background-color", "red").live("click", function() {
        remove($(this).parents('tr').eq(0), table);
    });

    //create tablesorter+pager
    // CHANGED HERE OOPS
    // var table = $("table#tablesorter");
    table = $("table#tablesorter");
    table.tablesorter( { sortList: [ [0,0], [2,1] ] } )
        .tablesorterPager( { container: $("#pager")}  );
});

Я сделал тестовую страницу для вас с моим решением (щелкните красный TD ==, удалив эту строку).

http://jsbin.com/uburo (http://jsbin.com/uburo/edit для источника)

Если вопрос остается о том, как/почему/.... Комментарий

Ответ 3

Дела идут сложнее, если вы используете плагины tablesorterpager и tablesorterfilter - решение с помощью:

$("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");

работает только для пейджера, фильтр имеет другой кеш. Я ищу решение почти 2 часа, наконец, я написал что-то вроде этого:

$("#deleteRowButton").click( function(){
  // index of row which will be deleted
  var index = $('#gridTable tr[rel="'+$("#removeThisID").val()+'"]').index();
  // table with tablesorter
  var table = document.getElementById( 'gridTable' ).config.cache.row;
  // deleting row
  $('#gridTable tr[rel="'+$("#removeThisID").val()+'"]').remove();
  // truly DELETING row, not only mark as deleted - after this list of rows should look like [tr], [tr], [tr], undefined, [tr], ...
  delete( table[index] );
  // tablesorter things
  $("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");
});

Я удаляю строку, которая имеет атрибут rel так же, как значение ввода # removeThisID.

Теперь пришло время изменить плагин tablesorterfilter. В функции doFilter найдите строки:

// Walk through all of the table rows and search.
// Rows which match the string will be pushed into the resultRows array.
var allRows = table.config.cache.row;
var resultRows = [];

и замените их на:

// Walk through all of the table rows and search.
// Rows which match the string will be pushed into the resultRows array.
var allRows = table.config.cache.row;

// refresh cache 'by hand'
var newcache = new Array();
var i = 0;        
for( var a in allRows )
{
  newcache[i] = allRows[a];
  i++;
}
allRows = newcache;
var resultRows = [];

что все...

рассматривает форму Польша:)

Ответ 4

Это кажется странным подходом, но на самом деле это сработало для меня. Таблица отображает мелкие и пейджеры.

$("#tabeBodyId").empty();
$("#tableId colgroup").remove();

//Update table(done using Ajax)
$("#tableId").tablesorter({widthFixed: true}).tablesorterPager({container: $("#pager")}); 

Ответ 5

Решение Jitter почти работало для меня, хотя для обновления отсутствовала строка (см. код ниже). Я расширил код, чтобы вставить новую таблицу TR в таблицу.

Я играл, и он работает для меня под FFox, не проверял IExplorer. В любом случае, ошибка, которую я еще не смог исправить: если вы добавите новый TR, а затем попытаетесь удалить его, он не будет удален из таблицы: (

// "borrowed" from John Resig: Javascript Array Remove
// http://ejohn.org/blog/javascript-array-remove/
Array.prototype.remove = function(from, to) {
    var rest = this.slice((to || from) + 1 || this.length);
    this.length = from < 0 ? this.length + from : from;
    return this.push.apply(this, rest);
};

//repopulate table with data from rowCache
function repopulateTableBody(tbl) {
    //aka cleanTableBody from TableSorter code
    if($.browser.msie) {
        function empty() {
            while ( this.firstChild ) this.removeChild( this.firstChild );
        }
        empty.apply(tbl.tBodies[0]);
    } else {
        tbl.tBodies[0].innerHTML = "";
    }
    jQuery.each(tbl.config.rowsCopy, function() {
        tbl.tBodies[0].appendChild(this.get(0));
    });
}
//removes the passed in row and updates the tablesorter+pager
function tablesorter_remove(tr, table) {
    //pager modifies actual DOM table to have only #pagesize TR's
    //thus we need to repopulate from the cache first
    repopulateTableBody(table.get(0));
    var index = $("tr", table).index(tr)-2;
    var c = table.get(0).config;
    tr.remove();

    //remove row from cache too
    c.rowsCopy.remove(index);
    c.totalRows = c.rowsCopy.length;
    c.totalPages = Math.ceil(c.totalRows / config.size);

    //now update
    table.trigger("update");
    table.trigger("appendCache");

    //simulate user switches page to get pager to update too
    index = c.page < c.totalPages-1;
    $(".next").trigger("click");
    if(index)
        $(".prev").trigger("click");
}

function tablesorter_add(tr, table) {
    //pager modifies actual DOM table to have only #pagesize TR's
    //thus we need to repopulate from the cache first
    repopulateTableBody(table.get(0));
    table.append(tr);

    //add row to cache too
    var c = table.get(0).config;
    c.totalRows = c.rowsCopy.length;
    c.totalPages = Math.ceil(c.totalRows / config.size);

    //now update
    table.trigger("update");
    table.trigger("appendCache");

    //simulate user switches page to get pager to update too
    index = c.page < c.totalPages-1;
    $(".next").trigger("click");
    if(index)
        $(".prev").trigger("click");

    //Set previous sorting method
    var sorting = c.sortList;
    if(sorting == '')
        sorting = [[0,0]];
    table.trigger("sorton", [sorting]);
}

И вы можете использовать следующее:

Добавить новый TR со сложным HTML в нем:

tablesorter_add('<tr id="'+data.id+' " title="Haz click para editar" onclick="edit('+data.id+')"><td id="'+data.id+'_genus">'+data.genus+'</td><td id="'+data.id+'_species">'+data.species+'</td></tr>', $("#orchid_list"));

Удалите TR:

tablesorter_remove($("#"+orchid_id),$("#orchid_list"));

Моя упрощенная таблица образцов:

<table id="orchid_list" class="tablesorter">
<thead>
<tr>
    <th id="genus">Género</th>
    <th id="species">Especie</th>
</tr>
</thead>
<tbody>
    <tr id="2" title="Haz click para editar" onclick="edit('2')">
        <td id="2_genus">Amitostigma</td>

        <td id="2_species">capitatum</td>
    </tr>
    <tr id="4" title="Haz click para editar" onclick="edit('4')">
        <td id="4_genus">Amitostigma</td>
        <td id="4_species">tetralobum</td>
    </tr>
</tbody>
</table>

Ответ 6

Лучше использовать table.splice(index, 1); чем delete (table [index]);! "Удалить" делает только пустой элемент массива, но не полностью удаляется. Извините за мой английский! =)

Ответ 7

Пожалуйста, взгляните на вилку Motties tablesorter. Он сделал пример добавления/удаления строк при использовании плагинов tablesorter и пейджера. http://mottie.github.com/tablesorter/docs/example-pager.html