Datatable filtering via external form

Hi,

thanks for your question.

Customizing this in TablePress is indeed tricky, and therefore, I recommend a manual approach here:
Basically, you should turn off the loading of DataTables and the JS code of the Extension for this table (by unchecking the “Use DataTables” checkbox on the “Edit” screen of the table), and instead paste the JavaScript code to include the JS file and to execute the file into the page manually, i.e. by putting it into the page, below the Shortcode.
Do you know what I mean?

Regards,
Tobias

I kind of know what you mean… I gave it a shot and it seems to be working now! I’m not sure if I did exactly what you said though.

I unchecked the Use DataTables box like you said. I then made a new page template for the page with my table. All I did after that was add the calls to the existing “jquery.datatables.min.js” and “columnfilter.js” files directly to the page template. It got rid of the error message and the table with search features seems to be functioning properly.

Is that what you told me to do?? Ha! I’m a total newbie when it comes to JavaScript.
Why is it working now by adding the JS calls directly to the page template?

Hi,

yes, that’s exactly what I meant ??
And to finish things off, you could now remove the custom code that you had added to columnfilter.js again and put that into the page template directly. That way, you could (if you want to) use the unaltered JS on another table, and updates of the Extension will be easier (as you won’t lose the modifications).

It’s working now, because DataTables is no longer invoked twice, which was the case before this change.

Regards,
Tobias

Awesome, thanks for the help!

-Mitch

Hi,

sure, no problem! ?? Great to hear that this worked!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Hi Tobias,

I have another question regarding external filtering. I would like to move the global search filter to outside the tablepress wrapper (so that it’s with the rest of the column search features). I found this page:

https://www.datatables.net/examples/api/regex.html

Where you have your global search filter outside the table. I tried the initialisation code but I can’t get it to work. I’m assuming I have to create a placeholder element where I want the global search to go… but again, I’ve tried and been unsuccessful. Could you point me in the right direction?

Thanks,
Mitch

Hi,

the filters in that page (which was not done by me, but by the developer of the DataTables JS library) work slightly different: The form fields were added to the page as HTML code (in your case, you would do that by adding such HTML code above the table Shortcode). Then, there’s additional JavaScript code in place that triggers the DataTables API functions for filtering when those form fields are used (this is possible with TablePress, but you would need to write some custom PHP code that hooks into some of the available filter hooks).

Therefore, the better idea might be to simply use some CSS code to move the search field. For example, you could use absolute positioning and just shift the field to wherever you want it.

Regards,
Tobias

Ok, sounds good. In that case, I do have one other question then. How would I move the search filter above the pagination filter? I found another forum where you helped someone with this:

https://www.ads-software.com/support/topic/rearranging-the-search-field-filters-and-pagination?replies=4

However I can’t find the file “tablepress-datatables-column-filter-widgets.php” to which you’re referring. I believe that’s because it’s in an extension that I don’t have… Is it an extension I need for me to do this?

Again, thanks for the help!
Mitch

Hi,

that post applies to a different TablePress Extension (that from https://tablepress.org/extensions/datatables-columnfilterwidgets/ ). You do however not need this here.

Moving the search filter above the pagination should also be possible with some CSS. Can you please post a link to the page with your table, so that I can take a direct look? I might then be able to find the necessary code.

Regards,
Tobias

Sure thing.

https://sill.doowahdemo.com/who-weve-helped/

I’d like the global search filter to sit with the rest of the dropdown & search features.

Hi,

thanks for the link!

To move those fields, please add this to the “Custom Commands” textfield on the table’s “Edit” screen:

"sDom": "flrtip"

That will switch the filter and the pagination drop downs.
Then, we can use some CSS to reposition them. Please add this to the “Custom CSS” on the “Plugin Options” screen:

#tablepress-2_filter,
#tablepress-2_length {
  float: none;
}

Additionally, you could add this to move them up, closer to the other fields:

#tablepress-2_wrapper {
  clear: none;
}

Regards,
Tobias

Thanks for this! One other question regarding filters…

When I’m using a dropdown list as a column filter, is there a way of changing the default selection to say “All” instead of the column’s name?

For example, on my site the first dropdown is for the column “Grant Category”. Is there a way so that in the dropdown, there’s an option to see “All”? Essentially, you’re seeing the same records as you would see if Grant Category were selected (which is really just no filtering), but is there a way to change the label to say All?

Hi,

sorry, I do not have a solution to that. For this, you’ll have to edit the JavaScript code for the ColumnFilterWidgets JS code directly. However, as I’m not the developer of that library, I don’t really know where to start with that. Sorry ??

Regards,
Tobias