Wordpress自定义加载不同表的更多按钮

Question

我有wp_details表，其中有1000行数据要显示。我只想显示10个在头版后，点击加载更多，我还想显示10个更多，等等。我已经尝试创建更多的自定义负载，但没有工作，我被塞住了。

ajax.php

add_action('wp_ajax_nopriv_my_loadmore','my_loadmore');
add_action('wp_ajax_my_loadmore','my_loadmore');

function my_loadmore(){

    $paged=$_POST['page'];
    echo $paged;
    die();
}

myjs.js

jQuery(document).ready(function ($) {
jQuery(document).on('click','.myLoad',function(){
    var page=$(this).data('page');
    var ajaxurl=$(this).data('url');
    jQuery.ajax({    
        url:ajaxurl,
        type:"POST",
        data:{
            page:page,
            action:"my_loadmore"
        },
        error:function(response){
          console.log("error");  
        },
        success:function(){
           jQuery('.et_pb_post').append("Running");
        }
    });

这是我的模板的index.php页面，在这里我将从SQL表加载数据。

<article>
<?php

$table_name="wpnn_details";
$results = $wpdb->get_results( "SELECT * FROM $table_name"); 
if(!empty($results))                        
{
foreach($results as $row){
?>

<p class="description">
<?php echo $row->description;?>
</p>

</article>

<?php       }   } ?>

<div>
    <button class="myLoad" data-page="1" data-url="<?php echo admin_url('admin-ajax.php');?>">Load More</button>
</div>

Answer 1

我在我的手机上，没有开发堆栈来测试这个，但是这里有一个你可以尝试实现的例子。

从ajax.php更新您的函数

add_action('wp_ajax_nopriv_my_loadmore','my_loadmore');
add_action('wp_ajax_my_loadmore','my_loadmore');

function my_loadmore(){
    global $wpdb;

    $paged=$_POST['page']*10;
    $results = $wpdb->get_results( "SELECT * FROM $table_name LIMIT 10 OFFSET $paged");

}

编辑下面的按钮如下:分页将指示当前分页，从偏移量0开始。

<button class="myLoad" data-page="0" data-url="<?php echo admin_url('admin-ajax.php');?>">Load More</button>

在myjs.js内部更新ajax调用：

jQuery(document).on('click','.myLoad',function(){
    var page=parseInt($(this).data('page'));
    var ajaxurl=$(this).data('url');
    jQuery.ajax({    
        url:ajaxurl,
        type:"POST",
        data:{
            page:page,
            action:"my_loadmore"
        },
        error:function(response){
          console.log("error");  
        },
        success:function(data){
           if (data !== undefined ){ 
               jQuery('button.myLoad').data('page',(page+1));
               jQuery('#mycontentdiv").append(response);
           } else {
               jQuery('button.myLoad').remove();
           } 
        }
    });
});