使用 Rails 搜索参数将页面滚动到 table

Question

我有一个带有排序（搜索 gem）和分页的页面，页面顶部是一般信息，底部 table 每页 10 个项目。如果用户点击分页或排序按钮，我想自动滚动到 table 跳过顶部区域。

使用 URLSearchParams 我可以跟踪对分页按钮的点击，但是当用户点击其中一个排序按钮时 ransack 添加了类似 %5Bs%5D=description+asc 和我无法使用 URLSearchParams.

追踪它

const url = `http://localhost:3000/articles`;
const urlWithSorting = `http://localhost:3000/articles?q%5Bs%5D=started_at+desc`;
const urlWithPageAndSorting = `http://localhost:3000/articles?page=1&q%5Bs%5D=started_at+desc`;

const searchParams = new URLSearchParams(urlWithPageAndSorting);

// url 
const hasPageParams = searchParams.has('page'); // false
const hasSortingParams = searchParams.has('s'); // false

// urlWithSorting 
const hasPageParams = searchParams.has('page'); // false
const hasSortingParams = searchParams.has('s'); // false

// urlWithPageAndSorting 
const hasPageParams = searchParams.has('page'); // true
const hasSortingParams = searchParams.has('s'); // false

if (hasPageParams || hasSortingParams) {
 scroll(0, $(".js-article-table").position().top);
}

关于如何做到这一点有什么想法吗？谢谢！

Answer 1

这些 URL 只是标准括号查询的编码版本：

http://localhost:3000/articles?q%5Bs%5D=started_at+desc
http://localhost:3000/articles?q[s]=started_at+desc

如果您尝试打印出 URLSearchParams 实例，您将得到：

console.log([...searchParams].toString())
// q[s],started_at desc

所以你可以使用

searchParams.has('q[s]')

此外，请注意，您不能将完整的 URL 传递给构造函数，您必须先构建一个 URL，并且只使用搜索部分：

searchParams = new URLSearchParams(new URL(urlWithPageAndSorting).search)

使用 Rails 搜索参数将页面滚动到 table

Scroll page to the table with result using Rails ransack params

javascript

ruby-on-rails

ransack