I have an app with a very large legacy database. The model I'm currently indexing has 7,075 stories. I'm trying to create a javascript-y way for a user to search through all the records and have them automatically filter asynchronously.

我有一个带有非常大的遗留数据库的应用程序。我目前正在索引的模型有7075个故事。我正在尝试创建一种让用户搜索所有记录并让它们自动异步过滤的javascrip-y方法。

Ideally, here's the blurb (currently a partial in stories/_blurb that's being rendered in a Story.all.each do block):

理想情况下，下面是格式回复信息(当前是Stories/_blurb中的一部分，呈现在Story.all.each do块中)：

<div class="pb-4">
    <div id="blurb<%= story.id %>" class="blurb box p-3">
        <div class="text-end">
            <%= render partial: "stories/badges", locals: { story: story, show_author: false } %>
        </div>
        
        <h3 class="header-font mb-0"><%= link_to story.title, story_path(story) %></h3>
        <p class="mb-2 italics">
            <% if story.author %>
                by <%= link_to story.author.penname, author_path(story.author) %>
            <% else %>
                by Unknown Author
            <% end %>
        </p>


        <p><%= simple_format(story.summary) %></p>

        <p class="text-end mt-1 italics small">
            <%= pluralize(story.word_count, "Words") %>,&nbsp;

            <% if story.chapters.count != 0 %>
                Started <%= story.chapters.first.created_at.strftime("%m/%d/%Y") %>,&nbsp;
            <% else %>
                Started <%= story.created_at.strftime("%m/%d/%Y") %>,&nbsp;
            <% end %>

            <% if story.chapters.count != 0 %>
                Updated <%= story.chapters.last.created_at.strftime("%m/%d/%Y") %>
            <% else %>
                Updated <%= story.created_at.strftime("%m/%d/%Y") %>,&nbsp;
            <% end %>   
        </p>

        <% if @current_author == story.author %>
            <div class="text-end">
                <%= link_to "Edit Story", edit_story_path(story), class: "btn btn-admin btn-small" %>
                <%= button_to "Delete Story", story_path(story), form: { data: { turbo_confirm: 'Are you sure you want to delete this story? This action cannot be undone.' } }, class: "btn btn-small btn-admin", :method => :delete %>
            </div> <!-- author buttons -->
        <% elsif @current_author %>
            <div class="text-start">
                <%= render partial: "story_markers/buttons_read_later", locals: { story: story } %>
                <%= render partial: "story_markers/buttons_read", locals: { story: story } %>
            </div>
        <% end %>
    </div> <!-- story blurb -->
</div>

I currently have it working using Datatables.js in a kind of hacky way (having no header and rendering the above blurb in a single-cell row) that prohibits me from using the AJAX functionality for server-side processing, which means that it takes a literal minute or two to load all 7,075 stories. After that the search/filter works like a charm, but ain't nobody got time for that....

我目前使用Datatables.js以一种老套的方式(没有标题并在单个单元格行中呈现上面的格式回复信息)使用它，这禁止我使用AJAX功能进行服务器端处理，这意味着加载所有7,075篇报道需要一到两分钟的时间。在那之后，搜索/过滤就像魔咒一样工作，但没有人有时间去做……

I have had similar loading time issues for other large datasets on this app as well (there are over 70,000 users) and pagination can only do so much when you need to be able to search.

对于这个应用程序上的其他大型数据集，我也遇到过类似的加载时间问题(有超过7万用户)，而分页只能在你需要能够搜索的时候才能做到这一点。

Is there a way to speed up page loading for an index of a large dataset? I've looked at posts like this and have an API that gives a JSON of the data...but I haven't found a way to plug it in that actually accomplishes my goals.

有没有办法加快大型数据集的索引的页面加载速度？我看过这样的帖子，并且有一个API可以提供数据的JSON……但我还没有找到一种方法来插入它来真正实现我的目标。

Here's what I need:

这是我需要的：

1. For the index page to load in a reasonable amount of time


2. Some kind of pagination


3. For the user to be able to search all the records by any information (e.g. text in story.author and story.summary can be searched from the same search bar

If possible, it would be great if the above could be done asynchronously. Some tools I have seen do the thing where your search text is highlighted as you search. That would be magical, but is definitely on the "wish list" not the "must have" list.

如果可能的话，如果上述操作可以异步完成，那就太好了。我见过的一些工具可以在你搜索时突出显示你的搜索文本。这将是神奇的，但绝对是在“愿望清单”上，而不是“必须拥有”清单上。

Can anyone see a way to do this in plain Rails or do I need to start looking into Vue or Backbone or something?

有没有人能找到一种简单的方法来实现这一点，或者我需要开始研究Vue或Backbone之类的东西吗？