Query Parameter String URL Creation, Retrieval And Filter

This post was most recently updated on July 29th, 2024

This code can be used for creating a query parameter as a URL string for using it to take a small amount of data from any page to another as a query in the url.
We can use it for different purposes for default filter, search, pagination, id, user data binds in a key value pair. Its tested on different and support almost all browsers, mainly Chrome, Mozilafox, Safari, IE, Edge & Opera.

Here is the sample screenshot of the template:

Here below given an example template to achieve it by simple jquery.

$(document).ready(function(){ getURLQueryParameter(); }); // we are assuming 4 filters in our page and creating query with paameters as per that filter function queryParameterCreation() { $(‘.fliter’).show(); // let take a filter for example var $_filter1 = $(‘#filter1’).children(“:selected”).attr(‘value’); var $_filter2 = $(‘#filter2’).children(“:selected”).attr(‘value’); var $_filter3 = $(‘#filter3’).children(“:selected”).attr(‘value’); var $_filter4 = $(‘#filter4’).children(“:selected”).attr(‘value’); if ($_filter1 == “0” && $_filter2 == “0” && $_filter3 == “0” && $_filter4 == “0”) { var currentURL = location.protocol + ‘//’ + location.hostname + location.pathname; window.history.pushState(“”, “”, currentURL); } else { var query = $_filter1 + ‘,’ + $_filter2 + ‘,’ + $_filter3 + ‘,’ + $_filter4; var currentURL = location.protocol + ‘//’ + location.hostname + location.pathname + ‘?key=’ + btoa(encodeURIComponent(query)); // Default Encoding method provided by javascript for all browser with btoa if ($_filter1 != “0” || $_filter2 != “0” || $_filter3 != “0” || $_filter4 != “0”) { window.history.pushState(“”, “”, currentURL); } } } // Should be used inside (document).ready(function()); and used imidiate after page load // function to get the query paramenters from URl and do futher functionality form it. function getURLQueryParameter() { var querys = window.location.href.slice(window.location.href.indexOf(‘?’) + 1).split(‘&’); // Capturing all parameters from URL and slice it in array indexs var tempString = ”; $.each(querys, function (index, query) { // Each if (query.includes(“key=”)) { // check for key in parameter query = query.replace(‘key=’, ”); // Removing key from string parameter query = decodeURIComponent(atob(query)); // Default Decoding method provided by javascript for all browser with atob // Funtion goes here filterQuery = query.split(‘,’); setTimeout(function () { $(“#filter1”).val(filterQuery[0]); $(“#filter2”).val(filterQuery[1]); $(“#filter3”).val(filterQuery[2]); $(“#filter4”).val(filterQuery[3]); }, 400); queryParameterCreation(); } else if (query.includes(“id=”)) { var myString = query.replace(‘id=’, ”); tempString = myString; // Funtion goes here } else if (query.includes(“TId=”)) { var myString = query.replace(‘TId=’, ”); tempString = myString; // Funtion goes here } else if (query.includes(“EId=”)) { var myString = query.replace(‘EId=’, ”); // Funtion goes here } }); }

Below is the supporting HTML and CSS template for the above query:

Download source code Query Parameter.