javascript - 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");

}

编辑下面的按钮如下: Paginate 将指示当前分页，从偏移量 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();
           } 
        }
    });
});