jQuery tablesorter breaks when removing row and using pager

JavaScript
1

I tried to get help over at the jQuery forum/mailing list, but I’ve never had success with getting a question answered there. My question has to to with the jQuery tablesorter plugin, and I’m using the pager that is provided in the download. My HTML is very basic, and with the exception of a couple classes and IDs thrown in, it’s identical to their basic example’s HTML. Actually, I added a column on the right side with an image that when clicked deletes the row. That would be the major exception.

I’m trying to remove a row, and have the table update itself, including the row classes. If I use remove() instead of hide(), or if I use trigger(‘update’), the pager drops all pages except the current one. I’d like to use remove(), and ideally the a row that is deleted would be replaced by one from the next page. I thought that trigger(‘update’) was supposed to do that for me.

$(document).ready(function(){
            $("#myTable").tablesorter({
                widgets: ['zebra'],
                headers: {
                    0: { sorter: false }
                }
            }).tablesorterPager({
                container: $("#pager")
            });
            $('.delete-img').live('click', function(){
                var answer = confirm('Delete: ' + $(this).parent().next().html() + '?');
                if(answer){
                    // using remove() instead of hide() breaks the pagination after a row has been removed and a column is sorted
                    $(this).closest('tr').hide();
                    // this breaks the pagination after a row has been removed and a column is sorted, even with hide()
                    //$("#myTable").trigger("update");
                }else{
                    alert($(this).closest('tr').attr('id') + ' was not deleted');
                }
            });
        });

I don’t think there is anything all that special going on here. Any advice?

2

I found code at Sandbox that does what I want it to do, but it only works in IE:

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);
};

function repopulateTableBody(tbl) {
    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));
    });
}

function remove(tr, table) {
    repopulateTableBody(table.get(0));
    var index = $("tr", table).index(tr)-2;
    var c = table.get(0).config;
    tr.remove();
    c.rowsCopy.remove(index);
    c.totalRows = c.rowsCopy.length;
    c.totalPages = Math.ceil(c.totalRows / config.size);
    table.trigger("update");
    index = c.page < c.totalPages-1;
    $(".next").trigger("click");
    if(index)
        $(".prev").trigger("click");
}

$(function() {
    var table;
    $('table td:contains("Languages")').css("background-color", "red").live("click", function() {
        remove($(this).parents('tr').eq(0), table);
    });
    var table = $("table#tablesorter");
    table.tablesorter( { sortList: [ [0,0], [2,1] ] } )
        .tablesorterPager( { container: $("#pager")}  );
    table.get(0).config.page = 0;
});