dongqie5529 2016-11-26 16:57
浏览 69
已采纳

我可以使用新按钮替换HTML表中的行,单击按钮,不使用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.

  • 写回答

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)