Question

背景：我对javascript知之甚少，只有html和css。

我的问题：我的网页上有一个动态表格（WPDataTables），其中包括全局搜索，然后是列特定搜索。我的用户可以输入这些搜索，内容将动态更新。我的问题是URL没有更新以包含搜索参数，因此我们无法复制URL并将其发送给包含特定搜索结果的其他人。

WpDataTables目前有以下键来预过滤表：

全球：？wdt_search = filtervalue
列：？wdt_column_filter [ColumnName] = filtervalue

这很棒，但我的用户不够精明，无法创建自己的网址字符串，并且有大量可能的过滤器，因此预先创建每个过滤器都不是一种选择。

目前：我认为，即将获得解决方案，其中包括以下内容：

<body>
  <button onclick="updateURL();">Update</button>
  <script type="text/javascript">
    function updateURL() {
      if (history.pushState) {
          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?para=hello';
          window.history.pushState({path:newurl},'',newurl);
      }
    }
  </script>
</body>

理想情况下，用户只需单击“更新”按钮即可使用当前搜索参数更新URL。问题是？para = hello只是一个硬编码参数，我无法弄清楚如何让它变得动态并随着用户搜索/过滤而改变。

我的网站：http://imsched.com/sailings

Answer 1

无需重新加载页面即可更新查询字符串。如果您想在网址中跟踪这些更新，以便它们可以共享，并且仍然会影响您的过滤器，则可以使用哈希。可以轻松读取哈希值，您可以在不重新加载页面的情况下更新它。

// to read
window.location.hash

// to update
window.location.hash = 'param=value&param=value'

如果你有这样的网址http://url.com#1=one&2=two&3=three，你可以执行以下操作：

var filters = window.location.hash.split('&')
// filters now = ['1=one', '2=two', '3=three']
// so you can make easy use of those

更新

如果您需要更新查询字符串，并且不介意每次重新加载页面，您可以通过window.location.search

进行操作

// to read
window.location.search

// to update (will reload the page)
window.location.search = window.location.search + '&your_stuff=here'

可以从过滤器字段构建查询字符串的函数如下所示：

function buildQuery() {
  var inputs = [].slice.call(document.querySelectorAll('.js-filter'))

  return inputs.reduce(function(str, el, i) {
    return str + (i > 0 ? '&' : '') + el.name + '=' + el.value  
  }, '')
}

示例小提琴here

Answer 2

您可以尝试使用HTML5历史记录操作： https://css-tricks.com/using-the-html5-history-api/

与AngularJS等相比......

Answer 3

对不起，以上解决方案对我不起作用，您可以尝试以下方法：

window.location.pathname.replace(/[^a-zA-Z ]/, "");

Javascript - 将动态查询参数添加到当前网址而不重新加载

3 个答案:

更新