WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] Individual column filtering (10 posts)

  1. manolis09
    Member
    Posted 3 years ago #

    Thanks for this great plugin for WP :)

    My question is, is there any way to add an individual column filtering function in this plugin? Like some code in the "Custom Commands:" textfield in table options?

    Thanks in advance!

  2. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    Hi,

    it is possible to add this functionality, but unfortunately, it is not as easy as adding code to the "Custom Commands" textfield.
    Instead, you will need to manually add the entire code that you can see in your link to the page with the table.
    Doing that requires your own custom plugin that hooks into WP-Table Reloaded, similar to the example plugins here: http://tobias.baethge.com/download/plugins/additional/

    Another idea would be to manually load the DataTables library into your page, and to turn off the feature within WP-Table Reloaded.

    Best wishes,
    Tobias

  3. manolis09
    Member
    Posted 3 years ago #

    Could you please provide me with more detailed instructions on how i should do that?

    How should i create a custom plugin that hooks into WP-Table Reloaded? Given your examples, where should i put them?

    Or, how can i manually load the DataTables library into my page?

    Thanks again! I appreciate your help.

  4. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    Hi,

    unfortunately, I don't have more detailed instructions, except for suggesting that you take a look into the files in my link and try to understand how they work and how they load their respective code.
    From that, you will see how to hook into WP-Table Reloaded and can derive your custom plugin, which (just like any other plugin) would go in to the WordPress "plugins" folder and then needs to be activated in the Dashboard.

    To manually load the code into the page, you might be successful by adding the code from the DataTables site into your post, below the table Shortcode, and surrounded by HTML <script> tags. Additionally, you will need to load the jQuery and DataTables library files in the head of the page, also through <script> tags.
    To start with that, I suggest that you take a look at the examples and tutorials on the DataTables site, to see how everything is loaded in a plain HTML page.

    Best wishes,
    Tobias

  5. manolis09
    Member
    Posted 3 years ago #

    Well i just finished, and i have to say i have it working the way i want, and i'm excited!

    Thanks Tobias once again for the help.

    Later, i will post a guide with the way i made it working.

    Cheers!

  6. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    Hi,

    awesome! And thanks for sharing that guide, hopefully it will be helpful for others as well!

    Best wishes,
    Tobias

  7. manolis09
    Member
    Posted 3 years ago #

    1. Install the WP-Table Reloaded plugin.

    2. Go to plugin options and untick the following:

    a. JavaScript library: Yes, enable the use of a JavaScript library. WP-Table Reloaded includes three JavaScript libraries that can add useful features, like sorting, pagination, and filtering, to a table.

    AND

    b. List of Tables features: Yes, use the DataTables JavaScript features (sorting, pagination, filtering) on the "List Tables" screen.

    3. Now create a new page, let's say, and add your table in it. [table id=1 /]

    4. Find a way to insert script into the <head> of your website. My way of doing this was to install the HiFi (Head Injection, Foot Injection) plugin, which allows you to do this customization easily. So if you have installed this plugin, go to the page you are about to create, find the Head & Foot box, and insert inside the <head> the following codes:

    To import the necessary CSS styling file.

    <style type="text/css" media="all">
    /* <![CDATA[ */
    @import url("http://localhost/wordpress/wp-content/plugins/wp-table-reloaded/css/datatables.css?ver=1.9.1");
    /* ]]> */
    </style>

    To import the necessary Javascript files, so the plugin will work.

    <script type="text/javascript" language="javascript" src="http://localhost/wordpress/wp-content/plugins/wp-table-reloaded/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="http://localhost/wordpress/wp-content/plugins/wp-table-reloaded/js/jquery.datatables.min.js?ver=1.9.1"></script>

    Finally, to add a functionality, like "Individual column filtering", insert this:

    [Code moderated as per the Forum Rules. Please use the pastebin]

    Make sure to change MYTABLEID to your table id.

  8. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    Hi,

    thanks for that nice solution, I really like the way with the HiFi plugin - I hadn't seen it before. Very elegant!

    And: There should be no need to uncheck "List of Tables features: Yes, use the DataTables JavaScript features (sorting, pagination, filtering) on the "List Tables" screen.", as that should only influence the Dashboard of the site.

    Best wishes,
    Tobias

  9. manolis09
    Member
    Posted 3 years ago #

    Finally, to add a functionality, like "Individual column filtering", CLICK HERE.

    Make sure to change #wp-table-reloaded-id-1-no-1 to your table id.

    Thanks Tobias!

  10. oleksabublik
    Member
    Posted 2 years ago #

    hey manolis09, is your solution still working? I tried to replicate it but wasn't successful. No, I have filtering extension that Tobias recommends. Should I disable it?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic