Title: [Plugin: WP-Table Reloaded] Implementing ColumnFilterWidgets Last modified: August 20, 2016 --- # [Plugin: WP-Table Reloaded] Implementing ColumnFilterWidgets * Resolved [shannona](https://wordpress.org/support/users/shannona/) * (@shannona) * [14 years ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/) * I have an urgent need to get ColumnFilterWidgets implemented along with WP-Table Reloaded. I’m super frustrated because I’ve read other advice but I’m not quite sure how to do it. * I’ve uploaded the folder containing the files for this widget under the wp-reloaded folder. * I’m not sure how to get WP-Table Reloaded to call this functionality. If code has to be edited, exactly which code and what should it be edited to say? * Donation on its way because this is really important to me and I appreciate your persistence in helping users out. * [http://wordpress.org/extend/plugins/wp-table-reloaded/](http://wordpress.org/extend/plugins/wp-table-reloaded/) Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/page/2/?output_format=md) [→](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/page/2/?output_format=md) * Thread Starter [shannona](https://wordpress.org/support/users/shannona/) * (@shannona) * [14 years ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739188) * One clarification on my post: I’m already using WP-Table Reloaded just fine but just need to add this additional functionality. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [14 years ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739263) * Hi Shannon, * thanks for your post, and of course thank you for the donation, it is much appreciated! 🙂 * Adding ColumnFilterWidgets (I assume that you refer to [http://datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extras/ColumnFilterWidgets/index.html](http://datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extras/ColumnFilterWidgets/index.html)) to WP-Table Reloaded is a little bit tricky, but the inclusion is managable: * 1. Download [this JavaScript file](https://raw.github.com/cyberhobo/ColumnFilterWidgets/master/media/js/ColumnFilterWidgets.js) 2. Save it as “ColumnFilterWidgets.js” on your server, in the “wp-content” directory( not within the “wp-table-reloaded” or any other plugin folder!) 3. Go to the WordPress Dashboard, to the editor for the page/post with the table that you want to add ColumnFilterWidgets to. 4. Search for the Shortcode of the table there, and below the Shortcode, add an empty line, and then add this code: * ``` ``` * 5. Change the URL in that code to your site’s URL, and save the changes. 6. Go to the “Edit” screen of the table, that you want to add ColumnFilterWidgets to. Into the “Custom Commands” textfield in the “DataTables JavaScript Features” section, add this code: * ``` "sDom": 'W<"clear">lfrtip' ``` * 7. Go to the “Plugin Options” screen of WP-Table Reloaded. Into the “Custom CSS” textarea, add * ``` .column-filter-widget { float:left; padding: 5px; } .column-filter-widget select { display: block; } .column-filter-widgets a.filter-term { display: block; text-decoration: none; padding-left: 10px; font-size: 90%; } .column-filter-widgets a.filter-term:hover { text-decoration: line-through !important; } .column-filter-widget-selected-terms { clear:left; } ``` * That should hopefully do it 🙂 * Regards, Tobias * Thread Starter [shannona](https://wordpress.org/support/users/shannona/) * (@shannona) * [14 years ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739391) * I did all of your steps but it still isn’t showing up. Any ideas? * Here’s the page where I’m trying to implement it (and will eventually want it on several pages). * [http://wdwprepschool.com/disney-world-6-step-planning-course/wdw-planning-course-step-1-pick-a-date/](http://wdwprepschool.com/disney-world-6-step-planning-course/wdw-planning-course-step-1-pick-a-date/) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [14 years ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739420) * Hi Shannon, * as it seems, in my solution, I forget one thing (namely that the order of script loading is important). This means that some more effort is necessary. So, please try again with these steps (starting with no. 3 here, 1 and 2 as above): * 3. Paste this code into your theme’s “functions.php” file. * ``` add_filter( 'wp_table_reloaded_js_frontend_command', 'wp_table_reloaded_add_column_filter_widget', 10, 7 ); function wp_table_reloaded_add_column_filter_widget( $command, $table_id, $html_id, $tablesorter_script, $js_command, $parameters, $js_options ) { if ( ! in_array( $table_id, array( 1, 3, 6 ) ) ) return $command; $js_url = 'http://www.example.com/wp-content/ColumnFilterWidgets.js'; wp_register_script( 'wp-table-reloaded-column-filter-widget', $js_url, array( 'wp-table-reloaded-column-filter-widget' ), '1.0' ); wp_print_scripts( 'wp-table-reloaded-column-filter-widget' ); return $command; } ``` * 4. Change the URL in line 6 to the correct URL of the JS file. 5. In line 3, you can see a list of all tables that shall get the Column Filter Widgets functionality( currently, 1, 3, and 6, as an example). You will need to adjust this list to your table IDs. 6. and 7. as above. * Regards, Tobias * Thread Starter [shannona](https://wordpress.org/support/users/shannona/) * (@shannona) * [14 years ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739421) * Thanks for the follow-up, Tobias. * I implemented your steps and got a 500 Internal Server Error on the page where I’m testing it. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [14 years ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739422) * Hi, * oh, that means that there is a PHP error somewhere… Can you maybe take a log at the error log file on your server, so that we get more information about where the error happens? * Regards, Tobias * [vladzzz](https://wordpress.org/support/users/vladzzz/) * (@vladzzz) * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739509) * Hi Tobias, * After all steps, i got same rusults like shannona. * After editing function.php – 500 Bad Gateway. * Are you decided this problem? * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739510) * Hi, * Can you maybe check in the Server error log if there’s something logged there( an error message)? Without that, it is not possible to further investigate this, unfortunately. * Regards, Tobias * [vladzzz](https://wordpress.org/support/users/vladzzz/) * (@vladzzz) * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739511) * _2012/09/27 11:18:11 [error] 1321#0: *764048 upstream prematurely closed connection while reading response header from upstream, client: 212.109.xx.xx, server: xxxxxxx. com, request: “GET /auto HTTP/1.1”, upstream: “[http://127.0.0.1:8080/auto”](http://127.0.0.1:8080/auto”);, host: “xxxxxx.com”, referrer: “[http://xyxyxy.com/fleet”](http://xyxyxy.com/fleet”);_ * This error recorded after editing function.php * WP 3.4.2 WP-Table Reloaded 1.9.3 JavaScript lib – DataTables (and DataTables + TableTools) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739512) * Hi, * that sounds odd, and I have no real clue what that means or how this could be caused code change. * Are you sure you edited the correct “functions.php”? Did you edit it via the integrated WP plugin editor or via FTP? * Regards, Tobias * [vladzzz](https://wordpress.org/support/users/vladzzz/) * (@vladzzz) * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739513) * I copied your code and pasted in functions.php via ftp, previously was changed path to .js file and table id’s. * Are you tested this implementation on own site and it works? I will try test this on WP with default theme, without plugins and then will write the results. * thanks for your time * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739514) * Hi, * no, I did not test this on my site, and I can’t, as I’m very busy at the moment. Sorry. * Testing this on a new site with no other plugins and the Default theme is a good idea here. * Regards, Tobias * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739516) * Hi, * I finally tested this on my site, and found problem… I was stupid and made the JS script a dependency of itself. That won’t work of course… * Please try again with * ``` add_filter( 'wp_table_reloaded_js_frontend_command', 'wp_table_reloaded_add_column_filter_widget', 10, 7 ); function wp_table_reloaded_add_column_filter_widget( $command, $table_id, $html_id, $tablesorter_script, $js_command, $parameters, $js_options ) { if ( ! in_array( $table_id, array( 1, 3, 6 ) ) ) return $command; $js_url = 'http://www.example.com/wp-content/ColumnFilterWidgets.js'; wp_register_script( 'wp-table-reloaded-column-filter-widget', $js_url, array( 'wp-table-reloaded-frontend-js' ), '1.0' ); wp_print_scripts( 'wp-table-reloaded-column-filter-widget' ); return $command; } ``` * (which still needs to be adjusted of course, as described above). * Regards, Tobias * [vladzzz](https://wordpress.org/support/users/vladzzz/) * (@vladzzz) * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739518) * A lot of thanks, Tobias!!!!! Now, it works!! * But I got some problem again. How I can correctly use possible options of ColumnFilterWidgets such as aiExclude, bGroupTerms, sSeparator or iMaxSelections. I think, this should set in “user js command”. I’m trying to use different variation, but all ineffectually. Could you write correct syntax command for ‘aiExclude’ option for example? * thank you. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/#post-2739519) * Hi, * great that it works! 🙂 * From what I can see in the documentation, you will need to add something like * ``` "sDom": 'W<"clear">lfrtip', "oColumnFilterWidgets": { "aiExclude": [ 1 ] } ``` * to the “Custom Commands” field. * Regards, Tobias Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/page/2/?output_format=md) [→](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/page/2/?output_format=md) The topic ‘[Plugin: WP-Table Reloaded] Implementing ColumnFilterWidgets’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/wp-table-reloaded_f7dcd3.svg) * [WP-Table Reloaded](https://wordpress.org/plugins/wp-table-reloaded/) * [Frequently Asked Questions](https://wordpress.org/plugins/wp-table-reloaded/#faq) * [Support Threads](https://wordpress.org/support/plugin/wp-table-reloaded/) * [Active Topics](https://wordpress.org/support/plugin/wp-table-reloaded/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/wp-table-reloaded/unresolved/) * [Reviews](https://wordpress.org/support/plugin/wp-table-reloaded/reviews/) * 19 replies * 4 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-implementing-columnfilterwidgets/page/2/#post-2739523) * Status: resolved