I'm trying to find a way to filter a table by column in javascript. I found the function fnFilter() for a table, but i don't know how to use it and whether it will allow me to filter a table without the page being refreshed.
I am sorry to disappoint you, but unfortunately something like this is not possible with the plugin's built-in features.
What you're looking for to achieve can be done with our filters and hooks, but please note that this is custom solution, and it is not included in the provided support for the plugin, so I can't help you with it.
If I had an example to share with you, I would, but unfortunately I don't have any examples.
What I ended up doing was all done via front-end javascript.
To make it work, you will need to know which column in your table store the data you want to filter by. You can have the filtering data not visible, however you need to know where it's located. To make things easy for me, I made the first column the filter data to make things easier. ID key is what I needed to filter on, however I suppose you can use anything you like.
I used a plugin called "SOGO Add Script Header Footer" for WordPress that allowed me to add javascript for only a specific page. It's free and worked for me.
I found when inspecting the page that all wpdatatables are prefixed with the name "table_", and all the tables are indexed via odd numbers only.
I was able to find what I needed by inspecting the keyup event in one of the inputs used for filtering.
I often have a need to run JavaScript only on one page and usually just add a snippet of PHP for that. I was unaware of that plugin, I might check it out. Thanks for that too.
Hello,
I'm trying to find a way to filter a table by column in javascript. I found the function fnFilter() for a table, but i don't know how to use it and whether it will allow me to filter a table without the page being refreshed.
Could someone advise me on how this can be done?
Much apprecieted,
~Adam
Hello Adam
I am sorry to disappoint you, but unfortunately something like this is not possible with the plugin's built-in features.
What you're looking for to achieve can be done with our filters and hooks, but please note that this is custom solution, and it is not included in the provided support for the plugin, so I can't help you with it.
If I had an example to share with you, I would, but unfortunately I don't have any examples.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Adam,
I'm working on something like this. Did you ever figue anything out?
Hi Bill,
I was able to get this working for me.
What I ended up doing was all done via front-end javascript.
To make it work, you will need to know which column in your table store the data you want to filter by. You can have the filtering data not visible, however you need to know where it's located. To make things easy for me, I made the first column the filter data to make things easier. ID key is what I needed to filter on, however I suppose you can use anything you like.
I used a plugin called "SOGO Add Script Header Footer" for WordPress that allowed me to add javascript for only a specific page. It's free and worked for me.
I found when inspecting the page that all wpdatatables are prefixed with the name "table_", and all the tables are indexed via odd numbers only.
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery('#table_1' ).on( 'click', 'tr', function(e) {
var row = e.currentTarget;
if (!e.currentTarget.className.includes("wdtheader")) {
var data = wpDataTables["table_1"].fnGetData(e.currentTarget);
wpDataTables.table_3.fnFilter(data[0],0);
}
});
});
</script>
Hope this helps,
~Adam
Thanks so much, Adam.
I was able to find what I needed by inspecting the keyup event in one of the inputs used for filtering.
I often have a need to run JavaScript only on one page and usually just add a snippet of PHP for that. I was unaware of that plugin, I might check it out. Thanks for that too.
I'm doing some simple sorting with
wpDataTables.table_1.api().column(1).search('foobar'); wpDataTables.table_1.api().draw();
based on user input.
It's exactly what I was hoping for.