0

I'm currently trying to make certain custom post meta sortable on the frontend of my site. I wish the Title, Publisher, Developer, Score and Release Date all sortable, not sure what the best method is to do this, either have an arrow next to each title or to use drop down menus in a form above the results.

Here is the code I'm using:

<?php get_header(); ?>
<script language='javascript'>
$(document).ready(function() {
if ($.browser.msie  && parseInt($.browser.version, 10) < 9) {
    $('table tr:odd').addClass('odd');
    $('table tr:even').addClass('even');
}
});
</script>
<div id="content-archives">

    <?php if ( have_posts() ) : ?>
    <header class="page-header">
        <h1 class="page-title">Games Database</h1>
    </header>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th></th>
        <th><strong>Title</strong></th>
        <th><strong>Platform(s)</strong></th>
        <th><strong>Genre(s)</strong></th>
        <th><strong>Publisher</strong></th>
        <th><strong>Developer</strong></th>
        <th><strong>Score</strong></th>
        <th><strong>Release Date (US)</strong></th>
      </tr>
      <!-- Start the Loop -->
        <?php while ( have_posts() ) : the_post(); ?>
      <!-- Display game and information -->
      <tbody>
      <tr>
        <td><a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'games_database-thumb' ); } ?></a></td>
        <td><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td>
        <td><?php the_terms( $post->ID, 'games_database_game_platform' ,  ' ' ); ?></td>
        <td><?php the_terms( $post->ID, 'games_database_game_genre' ,  ' ' ); ?></td>
        <td><?php echo esc_html( get_post_meta( get_the_ID(), 'game_publisher', true ) ); ?></td>
        <td><?php echo esc_html( get_post_meta( get_the_ID(), 'game_developer', true ) ); ?></td>
        <td>
        <?php
        $review_link = esc_html( get_post_meta( get_the_ID(), 'game_review_link', true ) ); 
        $game_rating = esc_html( get_post_meta( get_the_ID(), 'game_rating', true ) );
        if ( ! empty( $review_link ) ) {
            $game_rating = '<a href="' . $review_link . '">' . $game_rating . '</a>';
        }
        ?>

        <div class="rating-<?php echo esc_html( get_post_meta( get_the_ID(), 'game_rating', true ) ); ?>">
            <?php echo $game_rating; ?>
        </div>

        </td>
        <!--<td><a href="<?php echo esc_html( get_post_meta( get_the_ID(), 'game_review_link', true ) ); ?>"><div class="rating-<?php echo esc_html( get_post_meta( get_the_ID(), 'game_rating', true ) ); ?>"><?php echo esc_html( get_post_meta( get_the_ID(), 'game_rating', true ) ); ?></div></a></td>-->
        <td><?php echo esc_html( get_post_meta( get_the_ID(), 'game_release', true ) ); ?></td>
      </tr>
      </tbody>
      <?php endwhile; ?>
    </table>


    <!-- Display page navigation -->
    <?php global $wp_query;
    if ( isset( $wp_query->max_num_pages ) && $wp_query->max_num_pages > 1 ) { ?>
        <nav id="<?php echo $nav_id; ?>">
            <div class="nav-previous"><?php next_posts_link( '<span class="meta-nav">&larr;</span> Older reviews'); ?></div>
            <div class="nav-next"><?php previous_posts_link( 'Newer reviews <span class= "meta-nav">&rarr;</span>' ); ?></div>
        </nav>
    <?php };
endif; ?>
</div>



As you can see I have hard coded the table header elements in so maybe that has to change? I really don't know how to progress with this so any and all help will be greatly appreciated.

Cheers!

1 Answer 1

2

You can define a simle anchor tag for each table heading, having it's own seperate id, then you have to use onclick event for each heading, depending upon the id which sends an ajaxrequest to get the results sorted in corresponding order. with the respective results you can replace the content of parent div with the latest result.

For this to achieve you should have knowledge of Admin Ajax in wordpress.

Admin Ajax: in your header.php

<script type="text/javascript">
 var ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>

in your html add same class to all th and add a diff id to to each one of them, make the respective changes in js in you custom js file like "my-custom.js", enqueue the js file , replace the class th-class with corresponding class in your html as well as js:

jQuery(document).ready(function(){
  jQuery(body).on('click','th-class', function(){
     var column_id  = jQuery(this).attr('id');
     jQuery.ajax({
       type: "POST",
       url: "ajax_url",
       data: {
             action: 'reorder_table',
             column_id: column_id,
           },
       success: function(res){
         console.log(res);
         //append the result in frontend
        },


     })
  })
});

In your function.php

function sort_table_data(){
 //get your results here as per column id
 if(!empty($_POST['column_id'])){
  $column_id = $_POST['column_id'];
  $output = '';
  //rest of the code as per column id, store result in $output

  echo $output;//you result here
  die(1);
 }
}
add_action('wp_ajax_reorder_table', 'sort_table_data');
add_action('wp_ajax_no_priv_reorder_table', 'sort_table_data');

**I've added the code what I could get in hurry, so you might have to fix the errors but this is how your process will take place. you can refer http://wp.tutsplus.com/articles/getting-started-with-ajax-wordpress-pagination/ as well

4
  • I don't have any knowledge of Admin Ajax at all I'm afraid!
    – Dave Burns
    Aug 16, 2013 at 11:55
  • Do you know where I can find any examples?
    – Dave Burns
    Aug 16, 2013 at 11:57
  • @DaveBurns search the tag archive for ajax here on the site? Or go to Codex and read the article?
    – kaiser
    Aug 16, 2013 at 12:13

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.