<script> // Function to change the URL parameter without refreshing the page function changeUrlParameter(key, value) { // Use jQuery instead of $ to avoid conflicts jQuery(document).ready(function($) { // Get the current URL var currentUrl = window.location.href;
// Create a URL object var url = new URL(currentUrl);
// Update or add the parameter url.searchParams.set('wdt_column_filter[' + key + ']', value);
// Replace the current URL with the updated one window.history.pushState({}, '', url);
// Update the content of the element with class 'wdt-filter-control' updateFilterControlContent(); }); }
// Function to update the content of the element with class 'wdt-filter-control' function updateFilterControlContent() { // Use jQuery instead of $ to avoid conflicts jQuery(function($) { // Get the parameter value from the URL var type = new URLSearchParams(window.location.search).get('wdt_column_filter[Type]');
// Update the content based on the parameter value var content = type ? '' + type : 'Brochure'; $('.form-control').text(content); }); }
// Set the default state to 'Brochure' and update the content on page load jQuery(document).ready(function($) { changeUrlParameter('Type', 'Brochure'); }); </script>
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
-
If i understood, you wish to create a way to have these custom buttons on the Page to change the predefined parameter in the URL to use our Pre-filtering tables through URL feature, and depending on which button is clicked, to change the predefined URL parameter/ and also all that without refreshing the Page?
Sorry to disappoint you, but at this time, we don't have any built-in solution to achieve this
You can suggest it to our developers, though - they will do their best to make a solution in the future.
to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.
You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;
and our newsletter, so you're informed about new features, bug fixes, freebies, etc.
-
If you have coding skills and wish to try to make a custom solution now,
My apology - i just forgot to add some example, that is the least i could do.
I see you are using a Google Sheet linked Table here - for that, we do not currently have anything remotely close to changing a parameter with custom hooks/code as you need here;
The only 'closest as possible' example I found is, for users who use SQL Query-based Tables, there is a way to dynamically change the Query based on some parameter.
This User had an API that does dynamic SQL based on parameters passed to it, so he asked if there are ways to manipulate that.
You can take a look at our available filters for developers here ;
but combining these two or perhaps even just by using that hook/filter,
you might be able to achieve this use-case.
We do like to give examples for certain solutions, but for this use-case, we, unfortunately, don't have anything yet, so at this time you can only try to make a custom solution to make this work.
I know that is far from this use-case you mean to achieve, but i hope it might be useful at least as an example.
Is there a way to target the search filed using jquery to update the table? or target the column search field using jquery to update the table? That would really help! The user experience would be way better if the page was not reloaded every time someone clicks on a button.
We like the fact the the moment you input something in the search filed the table gets updated immediately but adding specific buttons would aid in having the correct documentation to be displayed.
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
-
1. When it comes to the search of the Tables refreshing the Page;
I am sorry, but I do not understand what you mean by that.
That is the default way of how our Global Table Search block works - it does not refresh the Page.
For example, if you go to our Demo Sandbox Site, and search any value in the Table ID 1 , you will see that the searched row returns the result without refreshing the page.
2. We like the fact the the moment you input something in the search filed the table gets updated immediately but adding specific buttons would aid in having the correct documentation to be displayed.
- Yes - it seems that is related to your first/previous question.
As you can see, if you use the Table search, it returns the rows which match the searched value immediately without any refreshing of the Page.
-
But i am not sure what you mean by adding buttons.
If you mean to use our URL Column type and set it to make the links 'look as a button';
This is the general principle of the default behaviour of buttons - if you set up any link, it is going to redirect you to the linked Page.
You can add the "target blank" attribute, if you wish the link to open in a new tab;
But if you wish to set up some custom Button that will use AJAX and not refresh/ or redirect to some link;
For that you will need to make a custom solution, but i am not sure what you need exactly.
Can you please open a new ticket about this subject, and show us more details with any kind of example, what kind of button functionality you need and we will see if that's possible?
When you have multiple questions or issues which are for different subjects/topics,
please open a new ticket for each subject, and we will help/advise more effectively.
In that way, issues and questions which are related to different subjects will be in separate tickets so other users or our support agents can find them easily.
Our policy is to have one issue or question per ticket for the reasons described already.
Testing link above log in is:
user: viewer
password: I am the viewer
Is there a way to filter the table with buttons without reloading the page?
I created the code below with no luck. Not sure which function or class I should target to make the column search or filter.
<!-- Buttons to change the URL parameter -->
<button onclick="changeUrlParameter('Type', 'Brochure')">Brochure</button>
<button onclick="changeUrlParameter('Type', 'Manual')">Manual</button>
<button onclick="changeUrlParameter('Type', 'Submittal')">Submittal</button>
<button onclick="changeUrlParameter('Type', 'Specifications')">Specifications</button>
<button onclick="changeUrlParameter('Type', 'IPL')">IPL</button>
<button onclick="changeUrlParameter('Type', 'Guide')">Guide</button>
<button onclick="changeUrlParameter('Type', 'Miscellaneous')">Miscellaneous</button>
<script>
// Function to change the URL parameter without refreshing the page
function changeUrlParameter(key, value) {
// Use jQuery instead of $ to avoid conflicts
jQuery(document).ready(function($) {
// Get the current URL
var currentUrl = window.location.href;
// Create a URL object
var url = new URL(currentUrl);
// Update or add the parameter
url.searchParams.set('wdt_column_filter[' + key + ']', value);
// Replace the current URL with the updated one
window.history.pushState({}, '', url);
// Update the content of the element with class 'wdt-filter-control'
updateFilterControlContent();
});
}
// Function to update the content of the element with class 'wdt-filter-control'
function updateFilterControlContent() {
// Use jQuery instead of $ to avoid conflicts
jQuery(function($) {
// Get the parameter value from the URL
var type = new URLSearchParams(window.location.search).get('wdt_column_filter[Type]');
// Update the content based on the parameter value
var content = type ? '' + type : 'Brochure';
$('.form-control').text(content);
});
}
// Set the default state to 'Brochure' and update the content on page load
jQuery(document).ready(function($) {
changeUrlParameter('Type', 'Brochure');
});
</script>
sorry the link was not public but now is. https://iat-raypakv3.rheemdev.com/icontests/
Hi Jose,
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
-
If i understood, you wish to create a way to have these custom buttons on the Page to change the predefined parameter in the URL to use our Pre-filtering tables through URL feature, and depending on which button is clicked, to change the predefined URL parameter/ and also all that without refreshing the Page?
Sorry to disappoint you, but at this time, we don't have any built-in solution to achieve this
You can suggest it to our developers, though - they will do their best to make a solution in the future.
Please feel free to search on our suggestions page,
to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.
You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;
and our newsletter, so you're informed about new features, bug fixes, freebies, etc.
-
If you have coding skills and wish to try to make a custom solution now,
you can check out our available hooks for Developers on this documentation and see if you can find any hook that might help.
Please be advised that custom solutions with hooks are not included in our support.
You can also research resources such as Stack Overflow to see if any other user perhaps found a workaround.
( We do like to give examples for certain solutions, but for this use-case, we, unfortunately, don't have anything yet)
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
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
Hi Jose,
My apology - i just forgot to add some example, that is the least i could do.
I see you are using a Google Sheet linked Table here - for that, we do not currently have anything remotely close to changing a parameter with custom hooks/code as you need here;
The only 'closest as possible' example I found is, for users who use SQL Query-based Tables, there is a way to dynamically change the Query based on some parameter.
This User had an API that does dynamic SQL based on parameters passed to it, so he asked if there are ways to manipulate that.
You can take a look at our available filters for developers here ;
https://wpdatatables.com/documentation/information-for-developers/filters/
-
They pointed out this one :
wpdatatables_filter_mysql_query( $query, $tableId )
because you can use that to manipulate the Query.
There is also an option with Placeholders,
but combining these two or perhaps even just by using that hook/filter,
you might be able to achieve this use-case.
We do like to give examples for certain solutions, but for this use-case, we, unfortunately, don't have anything yet, so at this time you can only try to make a custom solution to make this work.
I know that is far from this use-case you mean to achieve, but i hope it might be useful at least as an example.
Thank you.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
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
Is there a way to target the search filed using jquery to update the table? or target the column search field using jquery to update the table? That would really help! The user experience would be way better if the page was not reloaded every time someone clicks on a button.
We like the fact the the moment you input something in the search filed the table gets updated immediately but adding specific buttons would aid in having the correct documentation to be displayed.
Hi Jose,
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
-
1. When it comes to the search of the Tables refreshing the Page;
I am sorry, but I do not understand what you mean by that.
That is the default way of how our Global Table Search block works - it does not refresh the Page.
For example, if you go to our Demo Sandbox Site, and search any value in the Table ID 1 , you will see that the searched row returns the result without refreshing the page.
2. We like the fact the the moment you input something in the search filed the table gets updated immediately but adding specific buttons would aid in having the correct documentation to be displayed.
- Yes - it seems that is related to your first/previous question.
As you can see, if you use the Table search, it returns the rows which match the searched value immediately without any refreshing of the Page.
-
But i am not sure what you mean by adding buttons.
If you mean to use our URL Column type and set it to make the links 'look as a button';
This is the general principle of the default behaviour of buttons - if you set up any link, it is going to redirect you to the linked Page.
You can add the "target blank" attribute, if you wish the link to open in a new tab;
But if you wish to set up some custom Button that will use AJAX and not refresh/ or redirect to some link;
For that you will need to make a custom solution, but i am not sure what you need exactly.
Can you please open a new ticket about this subject, and show us more details with any kind of example, what kind of button functionality you need and we will see if that's possible?
When you have multiple questions or issues which are for different subjects/topics,
please open a new ticket for each subject, and we will help/advise more effectively.
In that way, issues and questions which are related to different subjects will be in separate tickets so other users or our support agents can find them easily.
Our policy is to have one issue or question per ticket for the reasons described already.
Thank you for understanding.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
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