So, the main point here is how you can efficiently handle displaying a large amount of data using pagination and JavaScript (jQuery). Instead of rendering all 300 results on the page and hiding those that are not initially visible, which can slow down the initial loading time and cause strain on the database, it is better to optimize the query by limiting the number of results retrieved at once.
An alternative approach would be to make an asynchronous GET request to a web-service that returns the data in JSON format. This way, you can have a responsive page without overwhelming the server with a limitless query.
In addition, using PHP / MySQL and post-backs to handle this issue can also prevent long initial page load times and taxing queries.
To summarize, I highly recommend implementing pagination for your results. Here are some suggestions:
1) Initially, design your system using purely PHP / MySQL. For example:
/results/?start=0&limit=20 (Show results 0-19)
/results/?start=20&limit=40 (Show results 20-40)
2) If you want to provide a JavaScript-based mechanism for dynamically loading more content, expand your page so that it can output JSON data by adding a "format" parameter:
/results/?start=0&limit=20&format=JSON
If the "format" parameter is set to JSON, instead of generating HTML, the page will only return the paginated JSON data.
3) Finally, integrate JavaScript code to use the received JSON data and dynamically load more content:
$.get('/results/?start=' + start + '&format=JSON', function(data) {
// Process and display data
});
I hope this explanation clarifies things for you!