2016-11-26 16:57
浏览 69


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.

图片转代码服务由CSDN问答提供 功能建议

我有一个包含500个数组的数组。 我希望将这个2D数组显示为一个HTML表格,一次只显示10行。 最初显示前10行。 然后,当用户单击标有 Next 的按钮时,前10行将替换为接下来的10行,依此类推。

我的想法是认为我 将 Next 按钮指定为Javascript函数,作为其 onclick 属性的值。 我将首先显示前10行。 然后,当用户单击 Next 按钮时,将执行JS功能。 在该函数内部,我将不得不使用AJAX来获取2D数组(其中包含要显示的数据),以便我可以显示接下来的10行。


附录: 如果重要的话,包含数据的2D数组来自MySQL数据库中的表。

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • douqiao1413 2016-11-26 17:12

    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).

        // 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()' />
        // 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();

    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.

    解决 无用
    打赏 举报

相关推荐 更多相似问题