You use Ajax when you want/need to dynamically fetch some data from somewhere else (such as your server). Since those 500 arrays are in a MySQL table on your server, clearly you will have to fetch them at some point.
Option 1. You could use PHP to fetch all 500 arrays initially and generate the page with it (since the beginning your page will already know all rows). Upside: no need for Ajax since you already know all 500 rows since the beginning. Downside: will be slightly slower to load since you're fetching all 500 rows at once (in my opinion, unless each array is tremendously big this slowness can probably be neglected).
<?php
// Fetch all 500 arrays at once from mysql.
// I am assuming you already know how to do this
// and I'm simplifying the code by just putting a function here
// that you'll have to implement, of course
$array_of_arrays = get_array_of_arrays_from_mysql();
// Now you have your 2D array in PHP.
// Let's create the full table, with 500 rows, but set 'display: none;' for
// all the rows past the 10th, this way the user will only see
// the first 10
echo "<table id='myTable'>";
$arrayLength = count($array_of_arrays); // This will be 500 in your example
for ($i = 0; $i < $arrayLength; $i++) {
if ($i < 10) {
echo "<tr>";
} else {
// Create all rows past the 10th hidden since the beginning
echo "<tr style='display: none;'>";
}
// Now we write the cells
// We have to loop the inner array
$innerArrayLength = count($array_of_arrays[$i]);
for ($j = 0; $j < $innerArrayLength; $j++) {
echo "<td>" . $array_of_arrays[$i][$j] . "</td>";
}
echo "</tr>";
// Note that we are assuming that all inner arrays have the same
// length, otherwise the table will be messy, with rows with
// different sizes.
}
echo "</table>";
// OK, so your server will generate the HTML with the full table
// but only showing the first 10
// Now we have to code javascript to change the visibility of the rows accordingly.
?>
<input type='button' value='Next' onclick='goNext()' />
<script>
// this variable tells us which row group is currently showing
var currentlyShowing = 0; // currently showing rows 0 to 9
function goNext() {
// First of all, we hide everything
// I will use jQuery here because it is much easier,
// but it is possible to do it with pure javascript if you want.
$("#myTable tr").hide(); // This immediately hides all rows in the table.
// Now we update our variable
currentlyShowing = currentlyShowing + 10;
// Now we show the correct rows (the others will remain hidden)
// Again I choose to use jQuery because it is much easier
$("#myTable tr").slice(currentlyShowing, currentlyShowing + 10).show();
}
</script>
Option 2. Fetch the rows 10 at a time from the server using Ajax, as the user clicks the button. Upside: divides loading time in parts. Downsides: uses ajax instead of plain PHP (you could say it is slightly more complicated); also, after clicking the button the user might have to wait a while for ajax to respond - so the transition to the next 10 rows won't be instant. Since you don't want to use Ajax, go with option 1. You should be fine, there is nothing too bad about option 1, unless you are really worried about the loading time of your page.
