Pagination after AJAX filtering
-
Hi, I have a Pod that I load from a shortcode with this code:
$params = array(
? 'limit' => 10,
);
$innovators = pods( 'innovator' );
$innovators->find($params);
if ( 0 < $innovators->total() ){
? $html = "";
? while($innovators->fetch()){
? ? ?$url = $innovators->field('permalink');
? ? ?$picture = $innovators->field('picture_innovators._img.full');
? ? ?$name = $innovators->field('post_title');
? ? ?$org_practice = $innovators->field('org_practice_innovators');
? ? ?$country = $innovators->field('country_innovators');
? ? ?$website_temp = $innovators->field('website_innovators');
? ? ?...
$html .= "<div class='innovator-single'>";
? ? ?$html .= ? ? ? ?"<div class='innovator_container'>";
? ? ?$html .= ? ? ? ? ? ?$picture;
? ? ?$html .= ? ? ? ? ? ?"<div class='innovator-single-text'>";
? ? ?$html .= ? ? ? ? ? ? ? ?"<h6 class='text-center fliara_purple'>$name</h6>";
? ? ?$html .= ? ? ? ? ? ? ? ?"<h6 class='text-center font_playfair text_black'>$org_practice</h6>";
? ? ?$html .= ? ? ? ? ? ? ? ?"<h6 class='text-center font_playfair text_black fw_normal'>$country</h6>";
? ? ?$html .= ? ? ? ? ? ? ? ?"<p class='text-center fliara_purple'>$website</p>";
?$html .= ? ? ? ? ? ? ? ?"<a class='single-innovator-link classic-button' href='$url' target='_blank'>Learn more</a>";
? ? ?$html .= ? ? ? ? ? ?"</div>"; //innovator-single-text
$html .= ? ? ? ?"</div>"; //establecimiento_container
$html .= "</div>"; //establecimiento-tipo-single
? }
? $html .= $innovators->pagination( array( 'type' => 'advanced' ) );
}else{
? ? $html = "<p>There are currently no innovators registered on our website.</p>";
}In the same page I have a filter and run and AJAX to bring only the Pods with the filters values
jQuery("#filter-go").on("click", function(){
? ? var country = jQuery("#find-country").val();
? ? var sustainability = jQuery("#find-sustainability-dimension").val();
? ? var area = jQuery("#find-area").val();
? ? var ruralContext = jQuery("#find-rural-context").val();
? ? if( (country.length == 0) && (sustainability.length == 0) && (area.length == 0) && (ruralContext.length == 0) ) {
? ? ? jQuery(".innovators-filters-messages").html("<div class='alert-danger mt-10'>You must select at least one filter.</div>");
? ? ?}else{
? ? ? ? jQuery(this).prop('disabled',true).addClass('btn-disabled');
? ? ? ? jQuery("#filter-reset").prop('disabled',true).addClass('btn-disabled');
? ? ? ? jQuery(".loading-overlay").css({ "opacity": "1", "z-index": "999" });
? ? ? ? jQuery(".innovators-filters-messages").html("");
? ? ? ? var formItemsData = new FormData();
? ? ? ? formItemsData.append('country', country);
? ? ? ? formItemsData.append('sustainability', sustainability);
? ? ? ? formItemsData.append('area', area);
? ? ? ? formItemsData.append('ruralContext', ruralContext);
? ? ? ? formItemsData.append('action', 'getInnovators');
? ? ? ? formItemsData.append('nonce', ajax_object.nonce);
? ? ? ? jQuery.ajax({
? ? ? ? ? ?type: 'POST',
? ? ? ? ? ?url: ajax_object.url,
? ? ? ? ? contentType: false,
? ? ? ? ? ?processData:false,
? ? ? ? ? ?data: formItemsData,
? ? ? ? ? ?success: function (response) {
? ? ? ? ? ? ? jQuery("#innovators-all-main-container .dynamic_container").html(response);
? ? ? ? ? ? ? jQuery("#filter-go").removeAttr('disabled').removeClass('btn-disabled');
? ? ? ? ? ? ? jQuery("#filter-reset").removeAttr('disabled').removeClass('btn-disabled');
? ? ? ? ? ? ? jQuery(".loading-overlay").css({ "opacity": "0", "z-index": "-1" });
? ? ? ? ? ?},
? ? ? ? ? ?error: function (response) {
? ? ? ? ? ? ? console.log("response: "+response);
? ? ? ? ? ?}
? ? ? ? });
? ? }
});In the backend I filter the Pods with this code:
if (isset($_POST['action'])) {
? ? if ($_POST['action'] == 'getInnovators') {
? ? ? ? add_action('wp_ajax_nopriv_getInnovators', 'filter_innovators' );
? ? ? ? add_action('wp_ajax_getInnovators', 'filter_innovators');
? ? }
}
function filter_innovators(){
? ? $nonce = sanitize_text_field( $_POST['nonce'] );
? ? if ( ! wp_verify_nonce( $nonce, 'innovators-nonce' ) ) {
? ? ? ? die ( 'No, no, no!');
? ? }
? ? $country = sanitize_text_field( $_POST['country'] );
? ? $sustainability = sanitize_text_field( $_POST['sustainability'] );
? ? $area = sanitize_text_field( $_POST['area'] );
? ? $ruraContext = sanitize_text_field( $_POST['ruralContext'] );
? ? $where = "";
? ? $queryvars = array(
? ? ? ? array(
? ? ? ? ? ? 'data' => $country,
? ? ? ? ? ? 'data_field' => 'country_innovators.meta_value',
? ? ? ? ),
? ? ? ? array(
? ? ? ? ? ? 'data' => $sustainability,
? ? ? ? ? ? 'data_field' => 'sustainability_innovators.meta_value',
? ? ? ? ),
? ? ? ? array(
? ? ? ? ? ? 'data' => $area,
? ? ? ? ? ? 'data_field' => 'area_innovators.meta_value',
? ? ? ? ),
? ? ? ? array(
? ? ? ? ? ? 'data' => $ruraContext,
? ? ? ? ? ? 'data_field' => 'rural_context_innovators.meta_value',
? ? ? ? ),
? ? );
? ? $count = 0;
? ? for($i = 0; $i < 4; $i++ ){
? ? ? ? if( !empty($queryvars[$i]['data']) && $count == 0){
? ? ? ? ? ? $field = $queryvars[$i]['data_field'];
? ? ? ? ? ? $data = $queryvars[$i]['data'];
? ? ? ? ? ? $where = "$field = '$data'";
? ? ? ? ? ? $count++;
? ? ? ? } else if( !empty($queryvars[$i]['data']) && $count != 0){
? ? ? ? ? ? $field = $queryvars[$i]['data_field'];
? ? ? ? ? ? $data = $queryvars[$i]['data'];
? ? ? ? ? ? $where .= " AND $field = '$data'";
? ? ? ? }
? ? }
? ? $params = array(
? ? ? ? 'limit' => 10,
? ? ? ? 'where' => $where,
? ? );and then repeat the same code from the 1st part when the page loads.
My problem is that originally the pagination works great but when I filter, the pagination links have wrong urls. At first the links are:
https://fliara.eu/innovators/?pg=2
https://fliara.eu/innovators/?pg=3
etc..
and with the ajax filtering the pagination loads correctly the amount of pages but urls are:
https://fliara.eu/wp-admin/admin-ajax.php?pg=2
https://fliara.eu/wp-admin/admin-ajax.php?pg=3
etc.
But even when I manually type in the correct url it loads all the original items as if the filtering had never been done and the pagination shows the total amount of pages instead of only the amount of pages for the filtered pods.Is there another way to do AJAX filtering with pagination for PODS?
Thanks in advance.
- You must be logged in to reply to this topic.