如何使用 rails 和 jquery 优化 ajax 搜索

Posted 2023-03-16

【中文标题】如何使用 rails 和 jquery 优化 ajax 搜索

【英文标题】：How to optimize ajax search using rails and jquery

【发布时间】：2021-07-01 20:11:52

【问题描述】：

我有一个包含 150 条记录的用户表，在页面加载时，它会加载前 10 条记录，并在滚动时不断显示新记录，因为我正在使用 will_pagination gem。

第一个问题出现在我搜索某些内容时，如果找到的数据超过 10 条记录，will_pagination 将停止工作。

另一个问题是，当我从文本字段中删除关键字时，我的结果集永远不会被重置，所以当我从搜索字段中删除关键字时，我想重新加载整个记录集，就像它在前 10 个用户的页面加载时一样。

def search_users
  if params[:search_term].size > 0
    @users = User.joins(:company_users).where("(lower(users.fname) LIKE ? OR lower(users.lname) LIKE ?) AND company_users.company_id = ?", "%#params[:search_term]%", "%#params[:search_term]%", 1)
    @users = @users.paginate(page: params[:page], per_page: 10)
  else
    @users = @company.users.accessible_by(current_ability).order('lname').paginate(page: params[:page], per_page: 10)
  end
  respond_to do |format|
    format.js  render 'dashboard/search_users' 
  end
end

Ajax 调用：

var timer;
$('#searchUsers').keyup(function (e) 
    clearTimeout(timer);
    timer = setTimeout(function () 
        $.ajax(
            url: "<%= dashboard_search_users_path %>?search_term=" + e.target.value,
            type: 'get',
            dataType: "script",
        )
    , 400);
)

search_users.js.erb

<% if params[:page] && params[:page] > "2" %>
  $('#users-list').append('<%= j render 'users', users: @users, team: @team, company: @company, role: @role %>');
<% else %>
  $('#users-list').html('<%= j render 'users', users: @users, team: @team, company: @company, role: @role %>');
<% end %>
<% if @users.next_page != nil %>
  $('.pagination').replaceWith('<%= j will_paginate @users %>');
<% end %>

_users.html.erb

<% users.each do |u| %>
    <tr>
      <td class="name"><%= u.fname %> <%= u.lname %></td>
    </tr>
<% end %>
<div id="user-pagination-container">
  <%= will_paginate users %>
</div>
<script>
    $(document).ready(function () 
        let prevTop = 0;
        let currentTop = 0;
        if ($('#user-pagination-container .pagination').length) 
            $('#users-table').scroll(function () 
                currentTop = $(this).scrollTop();
                if (prevTop !== currentTop) 
                    prevTop = currentTop;
                    let url = $('#user-pagination-container .pagination .next_page').attr('href');
                    if (url && ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight - 3)) 
                        // $('.pagination').html('<img class="ajax-loader-users" src="<%#= asset_path('ajax-loader.gif') %>"  title="Loading..." />');
                        return $.getScript(url);
                    
                
            );
            return $('#users-table').scroll();
        
    );
</script>

任何最佳实践或解决方法来解决此类问题以及如何以更有效的方式来解决？ 我认为预输入或自动完成在这里不起作用。

【问题讨论】：

我认为第二个问题是因为你使用的是append，所以如果你想重置你应该缓存（客户端）原始列表。关于第一个问题，我猜是因为每当触发滚动事件时（如果有效），您就不会更新 params[:page]。

【参考方案1】：

我无法回答您的确切问题，但我可以建议您使用 datatables.js 来完成您的任务。我已经看到它在许多商业项目中使用过，我自己也使用过，并且会推荐它。使用 rails 中的 datattables.js，您可以根据具体情况在视图中对记录进行服务器端和客户端处理。您可以将其与流行的分页 gem 结合使用，例如 kaminary 和 will_paginate。