Sort table on th click

Anonymous

#252103

Hello!

I’m currently working on project, where I need to print a table with information – I’ve made a custom post type with Advanced Custom Fields, which I’m printing in the results.php because I’m using the built-in AJAX filtering from Search & Filter. My goal is to make it possible to sort when clicking on one of the th – first click could be ASC and second could be DESC.

Anything would help,
Thanks in advance!

<?php
if ( $query->have_posts() )
{
	?>
	<div class="lej-table-info-table">
	<table>
	    <tr>
            <th>Adresse</th>
            <th>Areal</th>
            <th>Værelser</th>
            <th>Pris</th>
            <th class="no-mo">Type</th>
            <th>Status</th>
        </tr>
	<?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		$status = strip_tags(get_the_term_list( $post->ID, 'status', '', ', ', '' ));
		?>
        
			<tr class="table-link" name="<?php global $post; echo $post->post_name; ?>">
                <td class="no-de"><?php echo $navn = get_field( "navn"); ?></td>
				<td class="no-mo"><?php echo $navn = get_field( "adresse"); ?></td>
                <td><?php echo $value = get_field( "areal"); ?> m²</td>
                <td><?php echo $vaerelser = get_field( "vaerelser"); ?></td>
			<?php if ($status == 'ledig') { ?>
				<td class="pris"><?php echo $value = get_field( "kontantpris" ); ?></td>
			<?php } else { ?>
				<td></td>
			<?php } ?>
                
                <td class="no-mo"><?php echo $value = get_field( "lejlighedstype" ); ?></td>
                <!--<td class="<?php echo strip_tags(get_the_term_list( $post->ID, 'status', '', ', ', '' )); ?>" style="text-transform: capitalize"><?php echo strip_tags(get_the_term_list( $post->ID, 'status', '', ', ', '' )); ?></td>-->
				<td class="<?php echo $status ?>" style="text-transform: capitalize"><?php echo $status ?></td>
            </tr>

		<?php
	}
	?>
	</table>
	</div>
	<?php
}
else
{
	echo "No Results Found";
}
?>

Trevor

#252144

The only way I can think you can do this is to have a form on the page with those sorting options in, and then you would need to write some custom JavaScript attached to the table headers that changes the sort settings in the form and then submits the form. You may need to hire a third party coder for this, as I am not ware of any code snippets in our forum that show how this can be done.

Anonymous

#252146

Alright, I’ll try that – thanks 🙂

Trevor

#252153

I will leave this thread open for now, and wait to hear back from you.

[Author]

Posts