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();
           } 
        }
    });
});

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

1 个答案: