[Resolved] Sorting Archive Tables by Clicking Column Heading

[Author]

Posts

[Dave]

Tell us what you are trying to do?
Use what I thought was standard View's functionality of sorting a table by clicking on a column heading

Is there any documentation that you are following?
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-154328
https://toolset.com/documentation/legacy-features/views-plugin/view-layouts-101/#table
https://toolset.com/forums/topic/sortable-table-headings/

What is the link to your site?
Current in developer mode, if access is required I'll provide it

I've been trying to setup a simple archive for some CPT's and display them in a table. But besides the block editor being quite clunky and not seeming to have an option for sortable table headers, when I apply the normal shortcode it doesn't seem to work either:

 <thead>
    <tr>
      <th>[wpv-heading name="types-field-child-first-name"]First Name[/wpv-heading]</th>
      <th>[wpv-heading name="types-field-child-surname"]Surname[/wpv-heading]</th>
      <th>[wpv-heading name="types-field-child-age"]Age[/wpv-heading]</th>
    </tr>
  </thead>

Is this functionality just not available for archives? Or am I doing something wrong here please?

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Your observation is correct and the sortable header table feature is not available for WordPress Archives.

To achieve something similar, you'll need to create the archive using a regular table and then apply some custom script, that can perform the sorting on the front-end.

You'll find some more information on the topic in this reply:
https://toolset.com/forums/topic/sorting-nested-tables/page/2/#post-1175110

I hope this helps and For more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards.
Waqar

[Dave]

Hi,

Ok, fair enough if it's not a feature, although it REALLY should be surely? If it could be put forward for development I'd highly recommend it. It is a basic function of tables after all.

I'll sort out a custom sorting script for it, but that post you've directed me to doesn't actually show the links to the scripts you recommended, it just says hidden link, so I'm assuming it's for those involved in the conversation only or something?

Before I waste ages going to find some compatible ones myself, could I get those recommendations to investigate please?

[Waqar]

Thanks for writing back.

You're welcome to share this as a feature request through the dedicated form:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

I apologize for the hidden links. Here are the suggested resources:
hidden link
hidden link

[Dave]

Thanks, I'll take a look over them. I was already looking into a Bootstrap-focused solution anyway and the mdbootstrap option may well be the one.

For anyone else reading this, I'll post the solution I end up using, but Datatables and FooTable are also viable options. In the mean time, anyone interested should check out this, admittedly fairly old thread, but it gets the job done:

https://toolset.com/forums/topic/sortable-table-with-jquery/

[Dave]

Note: This isn't a still needing assistance situation, I just wanted to post a followup with a solution for anyone viewing this ticket. The site made me tick the reopening tickey box but support please just close it off.

I've spent a fair bit of the day checking into these options and whilst I appreciate the ones suggested by Waqar, I'd advise against them because the mdbootstrap one requires a pro license and tablesorter hasn't been updated in nearly a year.

In the end I've gone with FooTable as all I've had to do is download the standalone version (the bootstrap one is an option too but I found the standalone one better suited to my setup) and then enqueue the scripts like this:

wp_enqueue_script( 'footable', get_stylesheet_directory_uri() . '/js/footable-standalone.latest/js/footable.js', array ( 'jquery' ), 3.1, false);
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/js/footable-standalone.latest/css/footable.standalone.min.css' );

In my theme's functions file (I created a chid theme but you don't need to). Then on the archive page just add this to the Loop Editors JS window:

jQuery(function($){
	$('.table').footable();
});

After that it's installed and good to go. You can follow the usage instructions on their website:

hidden link
hidden link

The only tiny issue I ran into was a known bug that has been addressed and is a simple copy and paste to fix and is detailed here:

hidden link

FooTable has way more features than I'm ever going to need but it gives me the flexibility to get things sorting properly and the amazing feature of having columns be mobile responsive and disappear at certain screen sizes and replaced with a dropdown!

Oh, and make sure you have Font Awesome running on your front end to get the icons to show up properly.

I hope that this helps somebody else out and I strongly encourage Toolset to include similar features soon.

[Waqar]

Thank you so much for sharing your detailed findings and solution.

It will surely help other users with a similar requirement.

I'm closing this ticket, but please feel free to reach us anytime, through a new one.