title: Javascript - Add Dynamic Query Paramter to Current URL Without Reload
body: <p><strong>Background:</strong> I have little knowledge of javascript, only html and css.</p>
  
  <p><strong>My Problem:</strong> I have a dynamic table on my webpage (WPDataTables) that includes a global search and then column specific search.  My users can type into these searches and the content will dynamically update. My problem is the URL does not update to include search parameters so we cannot copy and send URL's to other people that include specific search results.  </p>
  
  <p>WpDataTables currently has the following keys to pre filter the table: </p>
  
  <ul>
  <li><p>Global: ?wdt_search=filtervalue</p></li>
  <li><p>Column: ?wdt_column_filter[ColumnName]=filtervalue</p></li>
  </ul>
  
  <p>This is great but my users aren't savvy enough to create their own URL strings and there are a large number of possible filters so pre-creating each one is not an option.</p>
  
  <p><strong>Currently:</strong> I am close to getting a solution, I think, with the following:</p>
  
  <pre><code>&lt;body&gt;
    &lt;button onclick="updateURL();"&gt;Update&lt;/button&gt;
    &lt;script type="text/javascript"&gt;
      function updateURL() {
        if (history.pushState) {
            var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?para=hello';
            window.history.pushState({path:newurl},'',newurl);
        }
      }
    &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Ideally, with this the user will simply click the Update button to update the URL with the current search parameters. The problem is ?para=hello is just a hard coded parameter and I can't figure out how to get it to be dynamic and change with the users searching/filtering. </p>
  
  <p>My website: <a href="http://imsched.com/sailings" rel="nofollow noreferrer">http://imsched.com/sailings</a></p>