CODEWITHSUNDEEP
jquerytwitter-bootstrap
andrefadila
andrefadila

Reputation: 687

Bootstrap table overflow event

Based on my previous question: How to detect table that have overflow when reach bottom [jQuery]

I've become crazy to redesign UI for table with overflow style (bad at front-end). This bootstrap example give me the good UI but I hadn't found element to detect the scroll event when reach bottom row.

Example: http://jsfiddle.net/andrefadila/vbcwbz5m/2/

$('.fixed-table-body').on('scroll', function () {
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        alert('end reached');
    }
})

Thanks in advance

Upvotes: 1

Views: 838

Answers (2)

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

try with this below jquery it will help you to.

$("table").on("post-header.bs.table",function() {
$('.fixed-table-body').on("scroll", function () {
    if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
    {
      alert('end reached');
    }
  });
});

Upvotes: 0

Valeklosse
Valeklosse

Reputation: 1017

The issue I believe is the binding for the scroll event, as the element with the class .fixed-table-body, doesn't exist until the bootstrap table has finished rendering.

To get round this, bind the scroll event when the post header event for the bootstrap table fires. 

$("table").on("post-header.bs.table",function() {
    $("#console").append("<div>hello</div>");

    $('.fixed-table-body').unbind().on("scroll", function () {
        $("#console").append("<div>hello</div>");
    });
});

http://jsfiddle.net/v0c4rtnf/9/

Upvotes: 1

Related Questions