How to add a scroll bar on table (and also apply condition on scroll bar) in javascript?

Question

Here , I have 10 Json Objects . I am trying to add a scroll bar on the table with overflow:auto But here is a twist ,What i exactly want is the moment my scroll bar hit the bottom , i want to put a condition something like the upper 10 values repeats again but only when the scroll bar hits the bottom and i want it in a infinite loop.

What i did so far Here I put the JSON objects inside the array.

var response = [
  {
     "CategoryName":"Beverages",
     "ProductName":"Steeleye Stout"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Laughing Lumberjack Lager"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Lakkalik\u00f6\u00f6ri"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Guaran\u00e1 Fant\u00e1stica"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Ipoh Coffee"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Chang"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Chartreuse verte"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Ipoh Coffee"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Chai"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Chang"

  }
  ]

Now i created i table but i also want a change in it too, i just want 5 entries in first place .Next five ,i want to access from the scroll bar.

var key = [];

       document.write("<table border==\"1\"><tr>");
       for (key in response[0]) {
       document.write('<td>' + '<b>' + key + '</b>' + '</td>');
        }

        document.write("</tr>");
        for (var i = 0; i < response.length; i++) {
        document.write('<tr>');
        for (key in response[i]) {

             document.write('<td>' + response[i][key] + '</td>'); 
         }
        document.write('</tr>');
          }
        document.write("</table>");

I hope you guys understand what i wanted to ask. Thanks in advance :)

I guess this link will be help to you. https://stackoverflow.com/a/21561584/3664161 — burakkp, Feb 26 '20 at 08:10

Harshsetia · Accepted Answer · 2020-02-26T10:27:51.677

.scrobale table {margin: 0;padding: 0;display: block;max-width: 100%;}
.scrobale {
    max-height: 200px;
    height: auto;
    display: block;
    overflow: auto;
    max-width: 300px;
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>

.scrobale {
    max-height: 200px;
    height: auto;
    display: block;
    overflow: auto;
}
</style>

</head>

<body>
    <!-- Swiper -->


</body>

<script>
    var response = [
        {
            "CategoryName": "Beverages",
            "ProductName": "Steeleye Stout"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Laughing Lumberjack Lager"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Lakkalik\u00f6\u00f6ri"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Guaran\u00e1 Fant\u00e1stica"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Ipoh Coffee"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chang"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chartreuse verte"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Ipoh Coffee"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chai"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chang"

        }
    ]

    var key = [];

    document.write("<div class='scrobale'><table border==\"1\"><tr>");
    for (key in response[0]) {
        document.write('<td>' + '<b>' + key + '</b>' + '</td>');
    }

    document.write("</tr>");
    for (var i = 0; i < response.length; i++) {
        document.write('<tr>');
        for (key in response[i]) {

            document.write('<td>' + response[i][key] + '</td>');
        }
        document.write('</tr>');
    }
    document.write("</table></div>");
</script>


<script>
    jQuery(function($) {
        var contentvalue = $(".scrobale table tbody").html();
    $('.scrobale').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            // alert('add your table tr here');
            $(".scrobale table tbody").prepend(contentvalue);
        }
    })
});
</script>

</html>

See the snippet here. By using this you will pick the event (scroll end) & and then add you code as per your requirement.Let me know if you have any qns.

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>

.scrobale {
    max-height: 200px;
    height: auto;
    display: block;
    overflow: auto;
}
</style>

</head>

<body>
    <!-- Swiper -->


</body>

<script>
    var response = [
        {
            "CategoryName": "Beverages",
            "ProductName": "Steeleye Stout"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Laughing Lumberjack Lager"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Lakkalik\u00f6\u00f6ri"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Guaran\u00e1 Fant\u00e1stica"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Ipoh Coffee"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chang"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chartreuse verte"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Ipoh Coffee"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chai"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chang"

        }
    ]

    var key = [];

    document.write("<div class='scrobale'><table border==\"1\"><tr>");
    for (key in response[0]) {
        document.write('<td>' + '<b>' + key + '</b>' + '</td>');
    }

    document.write("</tr>");
    for (var i = 0; i < response.length; i++) {
        document.write('<tr>');
        for (key in response[i]) {

            document.write('<td>' + response[i][key] + '</td>');
        }
        document.write('</tr>');
    }
    document.write("</table></div>");
</script>


<script>
    jQuery(function($) {
    $('.scrobale').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('add your table tr here');
        }
    })
});
</script>

</html>

this is perfect the only thing i want now is the moment my scroll bar hits the bottom i want the same 10 entries loading again and again. i tried this but i can combine the events. can you helpme out. Thanks though — geeky, Feb 26 '20 at 08:44
and i want that condition in infinite loop like the moment my scroller react at the bottom whole 10 entries repeats again or we can say automatically filled. — geeky, Feb 26 '20 at 09:06
yeah better this time the last and only issue . Is it possible to get just values of categoryName and Product Name again and again . i dont want headings to print again and again. just the entries — geeky, Feb 26 '20 at 09:53
Bro , But by the way is it possible to put scroll bar with table right now table is in left side and scroll bar is in right side. — geeky, Feb 26 '20 at 09:58
i gave two upvotes to your answer one from my mate account.lol. i wish i could give you more. — geeky, Feb 26 '20 at 10:35
can you implement this table along with scroll bar using angular javascript — geeky, Feb 28 '20 at 05:26

How to add a scroll bar on table (and also apply condition on scroll bar) in javascript?

1 Answers1