[Plugin: WP-Table Reloaded] Implementing ColumnFilterWidgets

One clarification on my post: I’m already using WP-Table Reloaded just fine but just need to add this additional functionality.

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 https://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
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:

<script type="text/javascript" src="https://www.example.com/wp-content/ColumnFilterWidgets.js"></script>

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

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).

https://wdwprepschool.com/disney-world-6-step-planning-course/wdw-planning-course-step-1-pick-a-date/

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 = 'https://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

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.

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

Hi Tobias,

After all steps, i got same rusults like shannona.

After editing function.php – 500 Bad Gateway.

Are you decided this problem?

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

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: “https://127.0.0.1:8080/auto”, host: “xxxxxx.com”, referrer: “https://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)

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

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

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

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 = 'https://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

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.

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