Paginazione Utilizzando Ajax

18 lug 2016, 13:46:07
Visualizzazioni: 44K
Voti: 2

Voglio utilizzare la paginazione con Ajax per la tassonomia di post personalizzati. Ho provato molti codici ma alla fine non ho avuto successo. Quindi, come posso implementare la paginazione usando Ajax senza plugin?

Quando clicco sul pulsante "carica altro", i post devono essere caricati nella stessa pagina.

nome del post:- project

nome della tassonomia:- framework

functions.php

// Funzione per la paginazione WordPress
function wp_pagination() {
    global $wp_query;
    $big = 12345678;
    $page_format = paginate_links(array(
        'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format' => '?paged=%#%',
        'current' => max(1, get_query_var('paged')),
        'total' => $wp_query->max_num_pages,
        'type' => 'array'
            ));
    if (is_array($page_format)) {
        $paged = ( get_query_var('paged') == 0 ) ? 1 :
                get_query_var('paged');
        // echo '<div><ul>';
        // echo '<li><span>'. $paged . ' di ' . $wp_query->max_num_pages.'</span></li>';
        echo "<center>";
        foreach ($page_format as $page) {
            echo " " . $page;
        }
        echo "</center>";
        echo '</div>';
    }
}
1
Commenti

Come possiamo aiutarti se non ci mostri il tuo codice. Ci sono così tanti buoni plugin là fuori che puoi usare come riferimento, o semplicemente usare. IMHO, non capisco perché non vuoi usare un plugin se non sei in grado di codificare un progetto del genere da solo

Pieter Goosen Pieter Goosen
18 lug 2016 13:55:05
Tutte le risposte alla domanda 3
2

Ho ottenuto la risposta.

Per prima cosa devi aggiungere il seguente codice nel tuo file functions.php per richiamare l'AJAX nel tuo template**

add_action( 'wp_ajax_demo-pagination-load-posts', 'cvf_demo_pagination_load_posts' );

add_action( 'wp_ajax_nopriv_demo-pagination-load-posts', 'cvf_demo_pagination_load_posts' ); 

function cvf_demo_pagination_load_posts() {

    global $wpdb;
    // Imposta le variabili di default
    $msg = '';

    if(isset($_POST['page'])){
        // Sanitizza la pagina ricevuta   
        $page = sanitize_text_field($_POST['page']);
        $cur_page = $page;
        $page -= 1;
        // Imposta il numero di risultati da visualizzare
        $per_page = 3;
        $previous_btn = true;
        $next_btn = true;
        $first_btn = true;
        $last_btn = true;
        $start = $page * $per_page;

        // Imposta la tabella da cui verranno estratti i dati
        $table_name = $wpdb->prefix . "posts";

        // Esegui la query per i post necessari
        $all_blog_posts = $wpdb->get_results($wpdb->prepare("
            SELECT * FROM " . $table_name . " WHERE post_type = 'post' AND post_status = 'publish' ORDER BY post_date DESC LIMIT %d, %d", $start, $per_page ) );

        // Contemporaneamente, conta il numero di post estratti
        $count = $wpdb->get_var($wpdb->prepare("
            SELECT COUNT(ID) FROM " . $table_name . " WHERE post_type = 'post' AND post_status = 'publish'", array() ) );

        /**
         * Alternativa con WP_Query:
         *
        $all_blog_posts = new WP_Query(
            array(
                'post_type'         => 'post',
                'post_status '      => 'publish',
                'orderby'           => 'post_date',
                'order'             => 'DESC',
                'posts_per_page'    => $per_page,
                'offset'            => $start
            )
        );

        $count = new WP_Query(
            array(
                'post_type'         => 'post',
                'post_status '      => 'publish',
                'posts_per_page'    => -1
            )
        );
        */

        // Cicla attraverso tutti i post
        foreach($all_blog_posts as $key => $post): 

            // Imposta l'output desiderato in una variabile
            $msg .= '
            <div class = "col-md-12">       
                <h2><a href="' . get_permalink($post->ID) . '">' . $post->post_title . '</a></h2>
                <p>' . $post->post_excerpt . '</p>
                <p>' . $post->post_content . '</p>
            </div>';

        endforeach;

        // Opzionale, avvolgi l'output in un container
        $msg = "<div class='cvf-universal-content'>" . $msg . "</div><br class = 'clear' />";

        // Qui avviene la magia
        $no_of_paginations = ceil($count / $per_page);

        if ($cur_page >= 7) {
            $start_loop = $cur_page - 3;
            if ($no_of_paginations > $cur_page + 3)
                $end_loop = $cur_page + 3;
            else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
                $start_loop = $no_of_paginations - 6;
                $end_loop = $no_of_paginations;
            } else {
                $end_loop = $no_of_paginations;
            }
        } else {
            $start_loop = 1;
            if ($no_of_paginations > 7)
                $end_loop = 7;
            else
                $end_loop = $no_of_paginations;
        }

        // Logica per i pulsanti di paginazione     
        $pag_container .= "
        <div class='cvf-universal-pagination'>
            <ul>";

        if ($first_btn && $cur_page > 1) {
            $pag_container .= "<li p='1' class='active'>Primo</li>";
        } else if ($first_btn) {
            $pag_container .= "<li p='1' class='inactive'>Primo</li>";
        }

        if ($previous_btn && $cur_page > 1) {
            $pre = $cur_page - 1;
            $pag_container .= "<li p='$pre' class='active'>Precedente</li>";
        } else if ($previous_btn) {
            $pag_container .= "<li class='inactive'>Precedente</li>";
        }
        for ($i = $start_loop; $i <= $end_loop; $i++) {

            if ($cur_page == $i)
                $pag_container .= "<li p='$i' class = 'selected' >{$i}</li>";
            else
                $pag_container .= "<li p='$i' class='active'>{$i}</li>";
        }

        if ($next_btn && $cur_page < $no_of_paginations) {
            $nex = $cur_page + 1;
            $pag_container .= "<li p='$nex' class='active'>Successivo</li>";
        } else if ($next_btn) {
            $pag_container .= "<li class='inactive'>Successivo</li>";
        }

        if ($last_btn && $cur_page < $no_of_paginations) {
            $pag_container .= "<li p='$no_of_paginations' class='active'>Ultimo</li>";
        } else if ($last_btn) {
            $pag_container .= "<li p='$no_of_paginations' class='inactive'>Ultimo</li>";
        }

        $pag_container = $pag_container . "
            </ul>
        </div>";

        // Stampiamo l'output finale
        echo 
        '<div class = "cvf-pagination-content">' . $msg . '</div>' . 
        '<div class = "cvf-pagination-nav">' . $pag_container . '</div>';

    }
    // Termina sempre per evitare ulteriori esecuzioni
    exit();}

Ora aggiungi questo codice dove vuoi visualizzare i tuoi post (ad esempio index.php, home.php, ecc...)

<div class="col-md-12 content">
    <div class = "inner-box content no-right-margin darkviolet">
        <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Questo è necessario per far funzionare AJAX nella nostra pagina
            var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';

            function cvf_load_all_posts(page){
                // Inizia la transizione
                $(".cvf_pag_loading").fadeIn().css('background','#ccc');

                // Dati da ricevere dal nostro server
                // Il valore in 'action' è la chiave che verrà identificata dall'hook 'wp_ajax_' 
                var data = {
                    page: page,
                    action: "demo-pagination-load-posts"
                };

                // Invia i dati
                $.post(ajaxurl, data, function(response) {
                    // Se ha successo, aggiungi i dati al nostro contenitore HTML
                    $(".cvf_universal_container").append(response);
                    // Termina la transizione
                    $(".cvf_pag_loading").css({'background':'none', 'transition':'all 1s ease-out'});
                });
            }

            // Carica la pagina 1 come default
            cvf_load_all_posts(1);

            // Gestisci i click
            $('.cvf_universal_container .cvf-universal-pagination li.active').live('click',function(){
                var page = $(this).attr('p');
                cvf_load_all_posts(page);

            });

        }); 
        </script>
        <div class = "cvf_pag_loading">
            <div class = "cvf_universal_container">
                <div class="cvf-universal-content"></div>
            </div>
        </div>

    </div>      
</div>

Infine aggiungi questo codice nel tuo style.css

.cvf_pag_loading {padding: 20px;}
.cvf-universal-pagination ul {margin: 0; padding: 0;}
.cvf-universal-pagination ul li {display: inline; margin: 3px; padding: 4px 8px; background: #FFF; color: black; }
.cvf-universal-pagination ul li.active:hover {cursor: pointer; background: #1E8CBE; color: white; }
.cvf-universal-pagination ul li.inactive {background: #7E7E7E;}
.cvf-universal-pagination ul li.selected {background: #1E8CBE; color: white;}

Alla fine otterrai un risultato simile a questo.

Esempio di paginazione AJAX in WordPress

20 lug 2016 15:14:59
Commenti

Risposta fantastica!! Grazie!! Con alcuni miglioramenti nella parte ajax sono riuscito a farlo funzionare. Ho usato solo javascript, senza jQuery. Inoltre, come ha detto Mohan nell'altra risposta, nota che è necessario sostituire i vecchi dati con quelli nuovi, nel mio caso ho fatto container.innerHTML = this.response;

Adriana Hernández Adriana Hernández
9 gen 2022 01:45:37

buona risposta ma è incompleta senza l'evento click dei numeri di paginazione.

Ashish Odich Ashish Odich
1 lug 2023 13:12:44
0

Apprezzo molto gli sforzi di Pieter Goosen.

Attualmente sta aggiungendo ogni risposta allo stesso elemento senza rimuovere i dati precedenti, poiché si tratta di paginazione e non di un caricamento AJAX "load more". Apporta le modifiche come segue:

//$(".cvf_universal_container").append(response);
$(".cvf_universal_container").empty().append(response);
31 ago 2019 16:58:09
1

Utilizzo di paginate_links() nativo (ma aggirando i link):

il tuo script jQuery

jQuery( document ).on("click", ".page-numbers", function(e) {
 e.preventDefault();
 // prepara il numero da "href" per ajax
 var formdata=$("#yourform").serialize() 
  + "&action=yourajaxaction&pagenum=" + this.attr("href").replace("#","");

 // esegui l'ajax
 $.post( ajaxurl, formdata, function( response ) {
   $("#ajaxcont").html(response);
 });

nella tua funzione ajax

    // ottieni il numero di pagina
    $args["paged"]=(int)$_POST["pagenum"];

    // ... elabora la query con $args ...
    
    //output della paginazione 
    echo paginate_links( array(
        'total'        => $thaquery->max_num_pages,
        'current'      => $thaargs["paged"],
        'base' => "#%#%" //creerà href come "#3"
    ) );
4 mar 2022 14:22:57
Commenti

Per favore aggiorna il tuo codice con una spiegazione, o con il codice HTML, perché non è ovvio a cosa si riferisca $("#yourform"), dato che non c'è alcun form creato dalla funzione wp paginate_links(). Lo stesso vale per $("#ajaxcont"), a cosa si riferisce? Inoltre $thaquery e $thaargs non sono chiari su cosa siano. Quindi non sono sicuro che questa sia una risposta completa.

Studocwho Studocwho
30 ott 2022 02:59:11