[Plugin: WP-Table Reloaded] WP-Tables Search Function

Hi Ted,

thanks for your question and the donation! I really appreciate it!

Unfortunately, I haven’t yet worked with this multi filter feature of DataTables, so I don’t really know what is wrong.

But if you post the URL to the page with your table, I’ll gladly take a look to see if I can spot something that is wrong.

A page template is probably not necessary, as the HIFI plugin can basically do the same, as far as I see it.

Regards,
Tobias

Hi,

thanks for the link.

This might already be enough to fix this: You have not placed the JavaScript code in <script> tags. Please put

<script type='text/javascript'>

at the beginning of the code, and

</script>

at the end.

Regards,
Tobias

Hi,

thanks for that.

A few more things:
Now suddenly, the code is then head and not the footer anymore. Please change that back to the footer.

Also, you will need to enable the “Table Footer” checkbox on the “Edit” screen, because that’s where the input fields will be added to. As you currently don’t have a footer row, please also add a new empty row at the end of the table.

And finally (after inspecting the code closer), there are some changes to the code that need to be done. That is actually easier when you disable DataTables for your table. So please uncheck the “Use JavaScript library” checkbox as well.

Then, right at the beginning, before the line

<script type='text/javascript'>

add this to manually load DataTables:

<script type='text/javascript' src='http://www.bridge.trwebstudio.com/wp-content/plugins/wp-table-reloaded/js/jquery.datatables.min.js?ver=1.9.1'></script>

Then change the last section of the code to

$(document).ready(function() {
    /* Initialise the DataTable */
    var oTable = $("#wp-table-reloaded-id-3-no-1").dataTable({"oLanguage":{"sUrl": "http://www.bridge.trwebstudio.com/wp-content/plugins/wp-table-reloaded/languages/datatables/lang-en_US.txt", "sSearch": "Search all columns:" }, "aaSorting": [], "bSortClasses": false, "asStripClasses":['even','odd'] });

    /* Add a select menu for each TH element in the table footer */
    $("tfoot th").each( function ( i ) {
        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
        $('select', this).change( function () {
            oTable.fnFilter( $(this).val(), i );
        } );
    } );
} );

as we need to modify the call to DataTables with our table information.

Regards,
Tobias

Hi Ted,

I think we are almost there 🙂

Just one thing (hopefully): The line

<script type='text/javascript' src='http://www.bridge.trwebstudio.com/wp-content/plugins/wp-table-reloaded/js/jquery.datatables.min.js?ver=1.9.1'></script>

must go BEFORE the line

<script type='text/javascript'>

Regards,
Tobias

Hi Ted,

now you suddenly unchecked the “Table Head” checkbox?! Why that? 🙂
Please re-enable that checkbox.
Everything else looks fine, and I’m confident that it will work after that change by you.
If it still does not then, I’ll take a direct look with a username/password.

And thanks for wanting to send a donation, I really appreciate it!

Regards,
Tobias

Hi Ted,

thanks for the account details.
I was able to log in and after some testing found two minor changes that were necessary in the code to make the script work 🙂
The filtering works really nice!

Now, there’s one task for you left, regarding the content of the table:
As you can see, not all of the content is shown, because some of the drop down lists at the bottom are pretty wide. They are as wide as the longest text in their column. For example, in the “Specialty” column, the longest text is “Critical Care or Cath Lab Recovery RN for CV Observation Unit”, and that’s why the drop down is as long as that.
To make everything visible, you will now go through your table and shorten the longest texts, so that the drop down lists shrink, so that more columns can be displayed. You could try to either rephrase those long texts, or maybe try adding a line break (just press Enter in the cell in the middle of the text).

Regards,
Tobias

Hi Ted,

nice to hear that you like it! 🙂

No, no settings had to be changed. I just had to made changes in the JavaScript code (the one in the footer, with the HiFi plugin), that are necessary to adjust the code to certain circumstances when using the code with WordPress.

Best wishes,
Tobias

Hi Ted,

nope, that happens, because of a conflict in the URLs that you use.
WordPress is configured to be at http://www.bridgestaffing.com, while you called it without the www. prefix. This unfortunately causes a JavaScript problem (see http://wordpress.org/support/topic/plugin-wp-table-reloaded-alternate-row-highlighting-not-working?replies=7 for technical details).
If you go to http://www.bridgestaffing.com/?page_id=4609 (with www. prefix), you will see that everything works as expected.

So, you will have to decide: Either use www. all the time, or never. Then WordPress needs to be configured accordingly (with the “Site URL” and “WordPress URL” parameters in the options). And then you will need to adjust the URL in the code (in the Hifi textfield) accordingly.

And one more thing (which however is totally unrelated): You have copied the “Custom CSS” code into the Hifi textfield as well. That is the wrong location and the code won’t work there. Please paste the code into the “Custom CSS” textarea on the “Plugin Options” screen of WP-Table Reloaded instead.

Regards,
Tobias