Solace Solace - 10 days ago 9
Ajax Question

Can I replace rows in an HTML table with new rows, on the click of a button, WITHOUT USING AJAX?

I have an array of 500 arrays. I want to display this 2D array as an HTML table in such a way that only 10 rows are displayed at a time. Initially the first 10 rows are displayed. Then when the user clicks a button labelled

Next
, the first 10 rows are replaced by the next 10 rows, and so on.

My mind is thinking that I will assign the
Next
button a Javascript function as the value of its
onclick
attribute. I will display the first 10 rows initially. Then when the user clicks the
Next
button, the JS function is executed. Inside that function, I will have to use AJAX to fetch the 2D array (which contains the data to display), so that I can display the next 10 rows.

The question I am asking here is that is it possible to do this entire thing WITHOUT AJAX?

Addendum: The 2D array containing the data is coming from a table in a MySQL database, if that matters.

Answer

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.