2

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.

Milap
  • 6,915
  • 8
  • 26
  • 46
josephmbustamante
  • 352
  • 6
  • 19
  • Are you including jQuery? Do you see any errors in the console? – Mottie Jun 16 '15 at 01:07
  • I included jQuery as a dependency for the tablesorter script above. And I'm now getting an error in the console that says `TypeError: $ is not a function`. My alert appears when I refresh the script, and I don't get a 404 when trying to load the script either, so I know it is at least loading right. – josephmbustamante Jun 16 '15 at 13:04
  • Include the [`debug` option](http://mottie.github.io/tablesorter/docs/#debug) and see what it says: `jQuery(function($) { $("#tablesorter").tablesorter( theme: 'blue', debug: true ); } );` - you might want to also load & include a theme. – Mottie Jun 16 '15 at 15:20
  • Edit: I got it to work! Turns out that I had a loop when creating the table that assigned each row a tag on default by accident, so that was causing only the first row to sort, which isn't very helpful haha. – josephmbustamante Jun 16 '15 at 15:25
  • LOL, please add that as an answer so that I can upvote it, and it may benefit others. – Mottie Jun 16 '15 at 15:26
  • Done! Thanks for the help Mottie (: – josephmbustamante Jun 16 '15 at 15:30

1 Answers1

2

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.

josephmbustamante
  • 352
  • 6
  • 19