I want a plugin to receive a nested json file from a url and display its information in the form of paged cards with ajax search capability. Is there such a plugin?
I tested the wpDataTable plugin, but it is displayed as a table. I want it to be displayed as paginated cards with search capability.
I am afraid there is not plugin available to meet this requirement, but you can achieve this with the help of custom development.
This can be done using three steps:
Step 1: Place the given code in functions.php file of your theme.
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_custom_script_files' );
function enqueue_custom_script_files() {
wp_enqueue_script('custom-ajax-script', get_template_directory_uri() . '/js/custom-ajax.js', array('jquery'), null, true);
wp_localize_script('custom-ajax-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action( 'wp_ajax_fetch_json_data', 'fetch_api_json_data' );
add_action( 'wp_ajax_nopriv_fetch_json_data', 'fetch_api_json_data' );
function fetch_api_json_data()
{
$response = wp_remote_get('URL_TO_YOUR_JSON_FILE');
if ( is_wp_error($response) ) {
echo json_encode( array('error' => 'Unable to retrieve data') );
} else {
$data = wp_remote_retrieve_body( $response );
echo $data;
}
wp_die();
}
Step 2: Here are adding AJAX code inside JS file.
jQuery(document).ready( function ($) {
function fetchData( page = 1, searchQuery = '' ) {
$.ajax({
url : ajax_object.ajax_url,
type : 'POST',
data : {
action: 'fetch_json_data',
page : page,
search: searchQuery
},
success: function (response) {
let data = JSON.parse( response );
if ( data.error ) {
$( '#card-container' ).html( '<p>' + data.error + '</p>' );
} else {
displayCards( data );
}
}
});
}
function displayCards(data) {
let container = $( '#card-container' );
container.empty();
data.forEach(item => {
let card = `<div class="card">
<div class="card-body">
<h5 class="card-title">${item.title}</h5>
<p class="card-text">${item.description}</p>
</div>
</div>`;
container.append(card);
});
}
// Initial we are fetching data here.
fetchData();
// Search functionality is here.
$('#search-input').on('keyup', function () {
let searchQuery = $(this).val();
fetchData(1, searchQuery);
});
// Pagination code is here.
$( document ).on( 'click', '.pagination a', function (e) {
e.preventDefault();
let page = $(this).data( 'page' );
fetchData(page);
});
});Step 3: Here we are adding HTML to display Cards layout.
<div id="card-container" class="row"></div>
<input type="text" id="search-input" placeholder="Search Data">
<div class="pagination">
<a href="#" data-page="1">Card 1</a>
<a href="#" data-page="2">Card 2</a>
<a href="#" data-page="3">Card 3</a>
<!-- Add more pagination links as needed -->
</div>Please let me know if this helps.
