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

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.

Answers


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

Need Your Help

pdo dblib stored procedure insert wrong characters

sql-server-2008 pdo yii freetds

i'm using microsoft sql server as database and my php code on centos server. using freetds and dblib to connect from yii framework to mssql.