Individual column filtering

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

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

    Thread Starter manolis09

    (@manolis09)

    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.

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Thread Starter manolis09

    (@manolis09)

    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!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

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

    Best wishes,
    Tobias

    Thread Starter manolis09

    (@manolis09)

    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("https://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="https://localhost/wordpress/wp-content/plugins/wp-table-reloaded/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="https://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.

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Thread Starter manolis09

    (@manolis09)

    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!

    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?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Individual column filtering’ is closed to new replies.