Search code examples
phpjquerywordpresstablesortergenesis

WordPress : How to make tablesort work with Genesis


I'm using WordPress and the Genesis framework and a child theme. I'm trying to use the jQuery plugin tablesorter to make a sortable table. I have a table created by PHP on a page template like so:

<table id="propTable" class="tablesorter">

In my functions.php file, I have this code:

add_action( 'wp_enqueue_scripts', 'tablesort_script_add' );
function tablesort_script_add() {
  wp_enqueue_script(
    'jquery-tablesorter',
    get_stylesheet_directory_uri() . '/js/tablesorter-master/js/jquery.tablesorter.js',
    array('jquery')
  );
}

I've made sure that the directories are correct, but it doesn't seem to work. I don't know if it is a problem with the tablesorter js file, or with the child theme/Genesis framework I'm using overriding or otherways interfering with the script.

It might also be a problem with me needing to write another script file to activate or implement the tablesorter for a specific table. If anyone could let me know which one of these I need to add or fix, and give me some pretty specific, beginner-level instructions on how to get there, it would be greatly appreciated! Thanks.


Solution

  • I figured out my own problem! So it seems that the loop I was using to go through posts and create my table was actually creating a new <tbody> tag for each row, so only the first row of the table was getting sorted.

    If anyone else is having the same problem with tablesorter, some other things I had to do were make sure I only loaded one jQuery (using it as a dependency is enough), and making sure that you pass the $ through as a parameter in your jquery.tablesorter, since wordpress automatically uses jquery's noconflict mode and the $ isn't valid as a global variable for jQuery.