0

I created this plugin to display a list of registered users with the Faciliator role. Displays the list in a table with name, country and avatar as titles. It works fine but the search box only considers the visible rows not the hidden pages due to pagination. Any help appreciated. This is the code.

<?php 
function enqueue_plugin_scripts() {    
wp_enqueue_style('facilitator-users-style', plugins_url('css/style.css', __FILE__));}
add_action('wp_enqueue_scripts', 'enqueue_plugin_scripts');

function display_facilitator_users_table() {

    ob_start();

    $users_per_page = 50;
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $offset = ($paged - 1) * $users_per_page;
    $args_all = array(
        'role' => 'facilitator',
    );
    $all_facilitator_query = new WP_User_Query($args_all);
    $args = array(
        'role' => 'facilitator',
        'number' => $users_per_page,
        'offset' => $offset,
    );
    $facilitator_query = new WP_User_Query($args);

    echo '<input type="text" id="user-search" placeholder="Search by name or country">';
    echo '<table id="facilitator-users-table">';
    echo '<thead><tr><th>Avatar</th><th>Name</th><th>Country</th></tr></thead>';
    echo '<tbody>';

    if (!empty($facilitator_query->results)) {
        foreach ($facilitator_query->results as $user) {
            $user_id = $user->ID;
            $user_info = get_userdata($user_id);
            $avatar = get_avatar($user_id, 60);
            $name = $user_info->display_name;
            $country = get_user_meta($user_id, 'user_country', true); 

            echo '<tr class="user-row ' . esc_attr($country) . '">';
            echo '<td>' . $avatar . '</td>';
            echo '<td><a href="' . get_author_posts_url($user_id) . '">' . esc_html($name) . '</a></td>';
            echo '<td>' . esc_html($country) . '</td>';
            echo '</tr>';
        }
    } else {
        echo '<tr><td colspan="3">No facilitators found.</td></tr>';
    }

    echo '</tbody>';
    echo '</table>';

    echo '<div class="pagination">';
    echo paginate_links(array(
        'total' => ceil(count($all_facilitator_query->results) / $users_per_page),
        'current' => $paged,
        'prev_text' => '&laquo; Previous',
        'next_text' => 'Next &raquo;',
    ));
    echo '</div>';

    return ob_get_clean();
}

add_shortcode('facilitator_users', 'display_facilitator_users_table');

function plugin_custom_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
              var allUsers = $('.user-row');
           $('#user-search').on('input', function () {
                var searchValue = $(this).val().toLowerCase();
            
                allUsers.hide();
  
                allUsers.filter(function () {
                    return $(this).text().toLowerCase().indexOf(searchValue) !== -1;
                }).show();
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'plugin_custom_script');
5
  • paged is used in the main query, reusing it for your shortcode means that if your shortcode has 5 pages, but the page its on has 2, then page 3 will 404. You should not reuse query variables, that's a bug that cannot be fixed without changing to use something other than paged/query variables. Other than that though, it's not clear what your problem is as it's phrased in a very weird way regarding what you meant by visible rows. Are you trying to say that you're unable to view a 2nd page of users? Or that all pages show the same users regardless of the page you're on?
    – Tom J Nowell
    Sep 7, 2023 at 16:42
  • Or are you saying that the number of pages shown is incorrect?
    – Tom J Nowell
    Sep 7, 2023 at 16:46
  • The list displays the first page with 50 users, then at the bottom the pagination links. Links work fine. Page 2 shows another 50 users. The problem is with searching, it displays only the results that are visible in that page. If im on page 2 and search for a users that is in page 3 for eg.. it will not be found.
    – Artus
    Sep 7, 2023 at 16:51
  • ah because your javascript just hides and shows the rows that are on the page, you'd need to rebuild this to instead fetch data via AJAX from the REST API and then fetch new results everytime the search changes. Definitely change the use of paged though, you can set a different URL parameter via the format option in paginate links. Likewise you could implement search via PHP using a URL parameter and it would avoid this problem
    – Tom J Nowell
    Sep 7, 2023 at 17:18
  • Thanks a lot for those pointers.
    – Artus
    Sep 7, 2023 at 17:29

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.