CODEWITHSUNDEEP
javascriptjquery
Robert_Junior
Robert_Junior

Reputation: 1123

Find table row count in scrollable div

I have table with 500 rows inside a scrollable div. How can I know how many rows are currently showing inside viewport of div.

My aim is to do partial update to the table after an update and make the rest of changes while scrolling.

Upvotes: 1

Views: 937

Answers (3)

EdenSource
EdenSource

Reputation: 3387

You need to compare scrollTop() and offset().top to determine which rows are in your div area.

boundTop : where the"viewport" is starting boundBottom : where the "viewport" is ending

var boundTop = div.scrollTop()
var boundBottom = div.scrollTop() + div.height()

trOffset : the position of each row

var trOffset = $("table tr").offset().top

On scroll event, check for each rows if trOffset is between boundTop and boundBottom, then you can add a class to the row (.active, for exemple), and finally you can update every .active row :

    $("table tr").each(function () {
        trOffset = $(this).offset().top;
        if ((trOffset > boundTop) && (trOffset < boundBottom)) {
            $(this).addClass("active");
            $("td", this).stop().animate({
                "padding": "4px 10px 4px 30px"
            }, "fast");

        } else {
            $(this).removeClass("active");
            $("td", this).stop().animate({
                "padding": "4px 30px 4px 10px"
            }, "fast");
        }
    });

Live exemple

Upvotes: 1

Manoz
Manoz

Reputation: 6587

You would need to iterate each row which is visible.

Here is the fiddle- http://jsfiddle.net/j0up6z5y/

function isVisible( row, container ){

    var elementTop = $(row).offset().top,
        elementHeight = $(row).height(),
        containerTop = $(container).offset().top,
        containerHeight = $(container).height();

    return ((((elementTop - containerTop) + elementHeight) > 0) && ((elementTop - containerTop) < containerHeight));
}

Upvotes: 1

Dean.DePue
Dean.DePue

Reputation: 1013

Once you have the index upon clicking in a row and then changing data you can modify the row on the page with the data returned from the AJAX call:

 function modifyCell(data) {
   var row = $("#tblResults tbody tr").eq(rowIndex);  //index set with the click
   var cell = $(row).children('td').eq(6);  // column to change
   $(cell).html(data);  //modify cell user sees.
 }

Upvotes: 0

Related Questions