I am currently pulling down records(json data) down from an online database with the following ajax call. This json data is populating scroll-able table. The issue is that the ajax call can only pull down a finite amount of data, around 30 entries before the scroll bar on the table stops.
Question: How can I change the call to load more of my json data once I scroll to the bottom of my table? I want to be able to display all the data on my website not just the first 30 entries in the database.
function populateTable(){       //populates the project list with active projects
var reqBody1 = { "filters":{ "and": [] }}
var $orgName = $('#orgName');
$.ajax({        
    type: 'POST',
    url: "https://myWebsite.com/path/to/data",
    contentType: 'application/json',
    data: JSON.stringify(reqBody1),
    success: function(res){
        for (i=0; i <30 ; i++){
            $orgName.append('<tr><td>' + res.records[i].field_1364364 + '</td></tr>');
                }
            }
    });
}
The following html is for the table that accepts the json information from the ajax call. The table calls a scroll-able class to add a scroll bar at the side of the table.
<div id="projListWrapper" class = "scrollable"> 
    <table class= "table table-hover table-striped">
        <tbody id ="orgName"></tbody>
    </table>
</div> 
Please let me know if I can provide more details on the issue.
 
    