How to create a sortable table?

  • I am trying to create a table that users can sort by column header. The table is generated with the following code:

    <table border="0" width="100%" valign="middle" cellpadding="10" cellspacing="0">
<thead>
  <tr>
     <th>Partner Name</th>
     <th>Law Firm</th>
     <th>Location</th>
     <th>Comments</th>
     <th style="padding-left:10px;">Rating</th>
  </tr>
</thead>

<?php $rowclass=0;
      while (have_posts()) : the_post();
      $firm = get_post_meta($post->ID, 'firm', true);
      $location = get_post_meta($post->ID, 'location', true);
  ?>
<!-- BEGIN post -->
<tbody>
<tr class="row<?=$rowclass ?>">
    <td><a href="<?php echo get_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></td>
    <td><?php  if($firm !=='')  {echo $firm;} ?></td>
    <td><?php  if($location !=='') {echo $location;} ?></td>
    <td align="center"><?php comments_number('0','1','%'); ?>
    <td><?php  wp_gdsr_render_article(); ?></td>
 </tr>
</tbody>
<?php $rowclass = 1-$rowclass; ?>
<?php endwhile; ?>
</table>

    As you can see the table is produced within the Loop. I have tried a variety of javascript table sorter scripts and have been unsuccessful so far.

    If you would like to see the live site go to rateapartner dot com and click on one of the categories in the left side bar.

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter deserturchin

    (@deserturchin)

    Does anyone know how to create a sortable table? This seems like a simple endeavor. Anyone?

    Thread Starter deserturchin

    (@deserturchin)

    Seriously…nothing??

    Yeah should be easy enough, you just need to change the order of the results…

    You’ll need to declare query_posts in order to set the display order, and change that query based on a link clicked…

    The easiest way would be to check the get request… i’ll use your above code as a basis for an example….

    <table border="0" width="100%" valign="middle" cellpadding="10" cellspacing="0">
<thead>
  <tr>
     <th><a href="?sort=title">Partner Name</a></th>
     <th><a href="?sort=firm">Law Firm</a></th>
     <th><a href="?sort=location">Location</a></th>
     <th>Comments</th>
     <th style="padding-left:10px;">Rating</th>
  </tr>
</thead>

<?php
$rowclass=0;

$myvar= '';
if(isset($_GET['sort'])) {

$sort = $_GET['sort'];

  switch($sort) {
    case 'location': // ?sort=location
      $myvar = 'orderby=meta_value&meta_key=location';
      break;

    case 'firm': // ?sort=firm
      $myvar = 'orderby=meta_value&meta_key=firm';
      break;

    case 'title': // ?sort=title
      $myvar = 'orderby=title';
      break;

    default: // Request for sort but not any of the above then default to order by date
      $myvar = 'orderby=date';
      break;
  }

} else {

  $myvar = 'orderby=date'; // No request for 'sort' then default to order by date
}

query_posts(''.$myvar.''); // Now place the variable into the query....
while (have_posts()) : the_post();
$firm = get_post_meta($post->ID, 'firm', true);
$location = get_post_meta($post->ID, 'location', true);
  ?>
<!-- BEGIN post -->
<tbody>
<tr class="row<?=$rowclass ?>">
    <td><a href="<?php echo get_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></td>
    <td><?php  if($firm !=='')  {echo $firm;} ?></td>
    <td><?php  if($location !=='') {echo $location;} ?></td>
    <td align="center"><?php comments_number('0','1','%'); ?>
    <td><?php  wp_gdsr_render_article(); ?></td>
 </tr>
</tbody>
<?php $rowclass = 1-$rowclass; ?>
<?php endwhile; ?>
</table>

    That is untested, so see how you go…

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to create a sortable table?’ is closed to new replies.