SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery tablesorter breaks when removing row and using pager

    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.

    Code JavaScript:
    $(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?
    Last edited by skunkbad; Apr 7, 2011 at 10:23. Reason: needed to explain that an image when clicked deletes row

  2. #2
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found code at Sandbox that does what I want it to do, but it only works in IE:

    Code JavaScript:
    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;
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •