WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] Implementing ColumnFilterWidgets (20 posts)

  1. shannona
    Member
    Posted 2 years ago #

    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/

  2. shannona
    Member
    Posted 2 years ago #

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

  3. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    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

  4. shannona
    Member
    Posted 2 years ago #

    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/

  5. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    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

  6. shannona
    Member
    Posted 2 years ago #

    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.

  7. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    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

  8. vladzzz
    Member
    Posted 1 year ago #

    Hi Tobias,

    After all steps, i got same rusults like shannona.

    After editing function.php - 500 Bad Gateway.

    Are you decided this problem?

  9. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  10. vladzzz
    Member
    Posted 1 year ago #

    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)

  11. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  12. vladzzz
    Member
    Posted 1 year ago #

    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

  13. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  14. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  15. vladzzz
    Member
    Posted 1 year ago #

    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.

  16. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  17. vladzzz
    Member
    Posted 1 year ago #

    Oh, I used unnecessary [] characters))

    Thanks, Tobias.

  18. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sure, no problem, you are very welcome!

    Best wishes,
    Tobias

  19. gufranchorghay
    Member
    Posted 1 year ago #

    Hi

    WP-Table Reloaded working very much fine.

    Anybody help me out for the using table with CHECKBOX
    <input type="checkbox" name="mag" value="1"> in each row last col. with the value say 1,2,3 ...

    Out of the 10 rows I am selecting 2 rows using checkbox (tick mark)

    End of the table I have one BUTTON.

    after clicking the BUTTON I want to make a new Table or Form with those selected (2 rows) for further submission.

    Please help me out with javascript.

    I got the following javascript but I do'nt know how use.
    $('input:checked').each(function() {
    // To pass this value to its nearby hidden input
    $(this).parent('td').next('input').val($(this).val()); });

    Gufran

  20. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    please don't post your question more than once. I will answer in http://wordpress.org/support/topic/plugin-wp-table-reloaded-selected-rows-to-form-submission later.

    Regards,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic