Question

我使用以下函数显示wordpress插件的表格：

            <?php
            function display_table(){

            global $wpdb;

            echo '
            <table class="widefat">
            <thead>
                <tr>
                    <th>Delete</th>
                    <th>IMG</th>       
                    <th>Title</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Delete</th>
                    <th>IMG</th>       
                    <th>Title</th>
                </tr>
            </tfoot>
            <tbody>';
            $sql = 'SELECT * FROM '. $wpdb->prefix . 'my_table';
            $row = $wpdb->get_results($sql);
                foreach ( $row as $row ) 
                { 
                    echo '
               <tr>
                    <td><input name="checkbox[]" type="checkbox" id="checkbox[]" value="' . $row->id .'"></td>';
                echo '<td><img src="/my_images/' . $row->my_file. '"</td>';
                 echo '<td>' . $row->title .'</td>
               </tr>';}
            echo '</tbody>
            </table>';
            ?>

我希望在表格下方添加“加载更多”按钮，因为该表变得非常大。最初我想显示5行。我怎么能这样做？

我找到了一个教程并尝试对其进行调整，但似乎没有用。代码如下。 “myplugin.php”和“more_rows.php”都位于服务器上的同一文件夹中。

页面“myplugin.php”：

                    <script type="text/javascript">
                $(document).ready(function() {

                var track_click = 0; 

                var total_pages = <?php echo $total_pages; ?>;
                $('#results').load("more_rows.php", {'page':track_click}, function() {track_click++;}); 

                $(".load_more").click(function (e) {

                    $(this).hide(); 
                    $('.animation_image').show(); 

                    if(track_click <= total_pages) 
                    {

                        $.post('more_rows.php',{'page': track_click}, function(data) {

                            $(".load_more").show(); 

                            $("#results").append(data);


                            $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);


                            $('.animation_image').hide(); 

                            track_click++; 

                        }).fail(function(xhr, ajaxOptions, thrownError) { 
                            alert(thrownError); 
                            $(".load_more").show(); 
                            $('.animation_image').hide(); 
                        });


                        if(track_click >= total_pages-1)
                        {

                            $(".load_more").attr("disabled", "disabled");
                        }
                     }

                    });
            });
            </script>


            <?php
            function display_table(){

            global $wpdb;
            $sql = 'SELECT * FROM '. $wpdb->prefix . 'my_table';
            $item_per_page = 5;
            $get_total_rows = $wpdb->query($sql);
            $total_pages = ceil($get_total_rows/$item_per_page);    

            ?>

            <div id="results"></div>

            <div align="center">
            <button class="load_more" id="load_more_button">load More</button>
            <div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div>
            </div>
            <?php
            }
            ?>

页面“more_rows.php”：

                <?php
            $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

            if(!is_numeric($page_number)){
                header('HTTP/1.1 500 Invalid page number!');
                exit();
            }

            $position = ($page_number * $item_per_page);
            $sql = 'SELECT * FROM '. $wpdb->prefix . 'my_table ORDER BY id DESC LIMIT ' . $position .',' . $item_per_page;
            $row = $wpdb->get_results($sql);

            echo '
                            <table class="widefat">
                            <thead>
                                <tr>
                                    <th>Delete</th>
                                    <th>IMG</th>       
                                    <th>Title</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>Delete</th>
                                    <th>IMG</th>       
                                    <th>Title</th>
                                </tr>
                            </tfoot>
                            <tbody>';


                                foreach ( $row as $row ) 
                                { 
                                    echo '
                               <tr>
                                    <td><input name="checkbox[]" type="checkbox" id="checkbox[]" value="' . $row->id .'"></td>';
                                echo '<td><img src="/my_images/' . $row->my_file. '"</td>';
                                 echo '<td>' . $row->title .'</td>
                               </tr>';}
                            echo '</tbody>
                            </table>';
                            ?>

Answer 1

限制行数：在查询结尾处使用关键字“LIMIT”。例如：

SELECT * FROM table where x=x limit 5

然后，如果您确定该表有超过5个项目，只需通过添加GET参数在表格下方添加一个href链接，例如：

<a href="?load=all">load more</a>

并修改如下查询：

$limit = " LIMIT 5 ";
IF $_GET["load"] == "all" THEN
   $limit = "";
SELECT * FROM table where x=x $limit

然后你也可以使用ajax，或者直接加载所有行但是在第5行之后隐藏所有行（样式显示：隐藏），并在用户点击“加载更多”后使用javascript显示它们。

这取决于你想做什么。玩得开心。

在Wordpress中为表行加载更多按钮

1 个答案: