How do you display posts in a dynamic table?

Question

I'm currently using a plug-in called SortTable Post. It automatically takes your posts and puts them into a table that you like. It's a great idea, but the issue is that the plug-in hasn't been updated since 2011, and there are too many problems with it.

Here is an example of SortTable Post >> http://chicagoexecutivecoaching.com/smartleadership/smart-leadership-archives/

I've been looking for an alternative. The maker of the TablePress plug-in answered someone asking the same question with:

Instead, you should look into implementing a Page Template with a custom "The Loop", in which you use WordPress Template Tags to print the output as a HTML table. You can then add the sorting/search/pagination features to that table as well, by manually loading the DataTables JavaScript library (www.datatables.net) into the page.

That is a bit beyond my abilities at the moment. How EXACTLY would you do this? I'd need a step-by-step guide to do this.

Help is greatly appreciated :)

Answer 1

If you want do what the TablePress author recommended, you'd need first to create a custom page (or post category) template - see Codex for Page_Templates - I wouldn't explained it better then there. :)

There you'd need to create a custom WP_Query, or get_posts() / get_pages() query to get the list of posts or pages that you need (you will have to provide categories, or parent ID's, or something like this) - see Codex for WP_Query, get_posts, get_pages functions.

Then, inside the template you created, you'd need to include javascript and CSS from DataTables plugin. You'd need to download it and put the files somewhere on your host first, of course.

The loop might be something like:

<?php $posts = get_posts(...) ?>
<table id="postTable">
<thead>
  <tr>
   <th>Title</th><th>Content</th>
  </tr>
</thead>
<tbody>
<?php foreach($posts as $post){?>
<tr>
<td><?php echo $post->post_title?></td><td><?php echo $post->post_content ?></td>
</tr>
<?php } ?>
</tbody>

Then you'd need to add a javascript block which would initialize DataTables for your table

<script type="text/javascript">
 jQuery(function(){
    jQuery('#postTable').dataTable();
 });
</script>

If you did everything right it will generate a sortable table in your page template.

An easier way is probably using http://wpdatatables.com plugin and achieving the same results by just executing a MySQL query and putting the shortcode on your page. Here's an example for doing exactly what you're looking for with a complete tutorial.

http://wpdatatables.com/list-wp-pages-wpdatatables-wordpress-table-plugin/

see you!