Unhiding table rows causes table to jump, how do you fix this?

Question

I have a table that is generated with rows of data based on filters. These filter hide and unhide rows if data in each cell doesn't match filter options. The problem I'm having is that when I hid more than 400 rows and then unhide the rows, the table jumps. I need to find a way to keep the table stationary while the rows are unhidden and placed back into the table. The following code shows how I'm initially creating the table, then how I am filtering the table.

CREATING TABLE:

for(var i = 0;i<records.length;i++){        

    table.append('<tr id="'+i+'">'+
            '<td class="cell">'+
            records[i].apmID +
            "</td>"+
            '<td class="cell">' +
            records[i].name +
            "</td>" +
            '<td class="cell">'+
            records[i].status +
            "</td>"+
            '<td class="cell">'+
            records[i].item +
            "</td>"+
            '<td class="cell">'+
            records[i].modifiedDate +
            "</td>"+
            '<td class="cell"><div id ="ind'+i+'"class="expiration_indicator" style="background-color: '+
            records[i].expirationIndicator +
            '"></div></td>'+
            "</tr>");
 }

UPDATE TABLE

function synchronize(){
for(var i = 0; i < records.length; i++){
    var show = true;
    if($("#apmID").attr('value') != "" && show){
        if(records[i].apmID.indexOf($("#apmID").attr('value')) == -1){
            show = false;
        }
    }
    if(nameFilters.length > 0 && show){
        if(nameFilters.indexOf(records[i].name) == -1){
            show = false;
        }
    }
    if(statusFilters.length > 0 && show){
        if(statusFilters.indexOf(records[i].status) == -1){
            show = false;
        }
    }
    if(itemFilters.length > 0 && show){
        if(itemFilters.indexOf(records[i].item) == -1){
            show = false;
        }
    }
    if(modifiedDateFilters.length > 0 && show){
        if(modifiedDateFilters.indexOf(records[i].dateRangeIndicator) == -1){
            show = false;
        }
    }
    if(expirationFilters.length > 0 && show){
        if(expirationFilters.indexOf(records[i].expirationIndicator) == -1){
            show = false;
        }
    }

    var reportRow = "#"+i.toString();

    if(show){
        $(reportRow).show();
    }
    else{
        $(reportRow).hide();
    }
}
 }

Records is an array of structs that hold the generated data from my database. In my synchronize function, the filter arrays hold the selected options to filter on. The hiding and unhiding works, I'm just trying to come up with away to prevent the table from jumping while this script is running.

I don't know what you mean when you say it "jumps". Off topic, but when you get this figured out, consider heading over to http://codereview.stackexchange.com/ to get a little help with reducing the repetition in your code. You can make some drastic reductions. — Lye Fish, Jul 01 '15 at 15:08
http://jsfiddle.net/PvwfK/ this should help http://stackoverflow.com/questions/7564043/jquery-hiding-collapsing-a-table-row — aahhaa, Jul 01 '15 at 15:30
When the table updates it appears to flicker or jump to top of the page for a few seconds, then it goes back to it original location. — xXMatthewCookeXx, Jul 01 '15 at 15:57

score 0 · Answer 1 · answered Jul 01 '15 at 17:59

Maybe instead of showing and hiding in your loop which could generate some weird effect if your table is really big, you could hide the table while your loop is running and work with class to show or hide your rows. Like this for example:

    function synchronize(){
    $('table').hide()
    for(var i = 0; i < records.length; i++){
        var show = true;
        if($("#apmID").attr('value') != "" && show){
            if(records[i].apmID.indexOf($("#apmID").attr('value')) == -1){
                show = false;
            }
        }
        if(nameFilters.length > 0 && show){
            if(nameFilters.indexOf(records[i].name) == -1){
                show = false;
            }
        }
        if(statusFilters.length > 0 && show){
            if(statusFilters.indexOf(records[i].status) == -1){
                show = false;
            }
        }
        if(itemFilters.length > 0 && show){
            if(itemFilters.indexOf(records[i].item) == -1){
                show = false;
            }
        }
        if(modifiedDateFilters.length > 0 && show){
            if(modifiedDateFilters.indexOf(records[i].dateRangeIndicator) == -1){
                show = false;
            }
        }
        if(expirationFilters.length > 0 && show){
            if(expirationFilters.indexOf(records[i].expirationIndicator) == -1){
                show = false;
            }
        }

        var reportRow = "#"+i.toString();

        if(show){
            $(reportRow).addClass('toShow').removeClass('toHide');
        }
        else{
            $(reportRow).removeClass('toShow').addClass('toHide');
        }
    }
    $('table').show()
}

And in your css

table tr.toShow
{
    display: block;
}
table tr.toHide
{
    display: none;
}

Unhiding table rows causes table to jump, how do you fix this?

1 Answers1