使定制帖子元数据可排序的前端

我目前正在尝试在我的网站前端对某些自定义帖子进行元排序。我希望标题、出版商、开发者、分数和发布日期都可以排序，但不确定最好的方法是什么，要么在每个标题旁边有一个箭头，要么在结果上方的表单中使用下拉菜单。

下面是我使用的代码：

<?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>

正如您所看到的，我已经硬编码了表头元素，所以可能需要更改？我真的不知道如何在这方面取得进展，因此我们将非常感谢您的任何帮助。

干杯

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 }, }) }) });

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\');

相关推荐