Support » Plugins and Hacks » WP-Table Reloaded » [Plugin: WP-Table Reloaded] Implementing ColumnFilterWidgets

  • Resolved shannona

    (@shannona)


    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/

Viewing 15 replies - 1 through 15 (of 19 total)
  • One clarification on my post: I’m already using WP-Table Reloaded just fine but just need to add this additional functionality.

    Plugin Author TobiasBg

    (@tobiasbg)


    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 ) 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="http://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).

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

    Plugin Author TobiasBg

    (@tobiasbg)


    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

    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 TobiasBg

    (@tobiasbg)


    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?

    Plugin Author TobiasBg

    (@tobiasbg)


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

    (@tobiasbg)


    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

    Plugin Author TobiasBg

    (@tobiasbg)


    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 TobiasBg

    (@tobiasbg)


    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

    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 TobiasBg

    (@tobiasbg)


    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)
  • The topic ‘[Plugin: WP-Table Reloaded] Implementing ColumnFilterWidgets’ is closed to new replies.