从DOM中删除行后更新jQuery Tablesorter插件

Question

我现在有一些代码隐藏了一行被删除的行,然后使用.remove()函数将其删除.

但是我有困难是让它保持"删除",因为每次刷新表格排序的寻呼机插件或我使用的过滤器插件插件时,删除的行重新出现,因为它们当然是缓​​存的.

目前的代码只是简单的小部件更新

$('.deleteMAP').live("click", function(){
  $(this).closest('tr').css('fast', function() {
 $(this).remove();
 $(".tablesorter").trigger("update");
 $(".tablesorter").trigger("applyWidgets");
  });
})

无论如何,从寻呼机插件的缓存和tablesorter插件中删除"行",以便当我"更新"表以反映已删除行的事实时,它们不会重新显示从通过缓存死了!

Answer 1

我找到了一个适合我的解决方案:

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

把它放在你编辑表格的地方之后.

Answer 2

在对这个问题进行一些修补之后,我得出结论,jQuery Tablesorter + jQuery TablesorterPager 的组合使用会产生 问题.没有寻呼机删除行和做"和更新"就足够了.

当您还包含寻呼机时,这样做会变得更加困难(正如您正确注意到存在一些缓存问题).

但是你的问题的主要原因是jQuery Tablesorter不被认为用于你想要修改的表(在添加/删除行的意义上).当你另外使用TablesorterPager时,这更适用.只需重读jQuery Tablesorter的描述

tablesorter是一个jQuery插件,用于将带有THEAD和TBODY标记的标准HTML表格转换为可排序的表格,而无需刷新页面.

TableSorter的清晰简洁的应用领域.它甚至没有在页面上提及ajax,编辑,删除,追加,.....或类似术语.它仅用于对静态表进行排序.

所以实际的解决方案是......开始寻找另一个jQuery"Table"插件,它是从一开始就建立的,可以修改表的意图/可能性.并默认支持此功能(删除,添加,....)

好吧,不过这里的解决方案是:

jQuery Tablesorter + TablesorterPager删除行(TR)

javascript源代码的快速复制粘贴(基于TablesorterPager示例的 HTML )

// "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用于源)

如果问题仍然是如何/为什么/ ....评论