You can define a simle anchor tag for each table heading, having it’s own seperate id, then you have to use onclick event for each heading, depending upon the id which sends an ajaxrequest to get the results sorted in corresponding order.
with the respective results you can replace the content of parent div with the latest result.
For this to achieve you should have knowledge of Admin Ajax in wordpress.
Admin Ajax:
in your header.php
<script type="text/javascript">
var ajax_url="<?php echo admin_url("admin-ajax.php'); ?>';
</script>
in your html add same class to all th and add a diff id to to each one of them, make the respective changes in js
in you custom js file like “my-custom.js”, enqueue the js file , replace the class th-class with corresponding class in your html as well as js:
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
},
})
})
});
In your function.php
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');
**I’ve added the code what I could get in hurry, so you might have to fix the errors but this is how your process will take place.
you can refer http://wp.tutsplus.com/articles/getting-started-with-ajax-wordpress-pagination/ as well