在这里，我尝试为“组织”列添加一个过滤器。它使用datatables库来处理表。profiles.js文件将必要的输入传递给_status_table.erb文件。
在profiles.js文件中，我添加了这些额外行，

document.addEventListener("DOMContentLoaded", function() {
 //existing code 
  if (!document.querySelector(".profiles.index, .users.admin_edit")) return;

  initDataTable({ tableId: "#profilesTable", orderVal: 1, targetsVal: [0, 4] });
  processCoderIdUpdate();

  $(".menu .item").tab();

  
  initDataTable({
    tableId: "#profilesStatusTable",
    orderVal: 1,
    sortingDirection: "asc",
    targetsVal: [0, 7]
  });

  // I added this below custom event listner for get the value from other file 

    $("#organizationFilterDropdown").dropdown();

  // Attach the change event listener
  $("#organizationFilterDropdown").on("change", function() {
    var selectedOrganizationId = $(this).dropdown("get value");

    // Get the table instance
    var profilesStatusTable = $("#profilesStatusTable").DataTable();

    // Clear any existing filters
    profilesStatusTable.columns().search("").draw();

    // Apply the filter to the "Organisation" column
    profilesStatusTable
      .columns(5)
      .search(selectedOrganizationId, false, false)
      .draw();
  });

字符串
在_status_table.html.erb中，我添加了这个下拉部分

<div class="ui fluid labeled search selection dropdown" id="organizationFilterDropdown" data-selected-organization="<%= @selected_organization %>">
  <input type="hidden" id="organizationFilterInput">
  <i class="dropdown icon"></i>
  <div class="default text">Filter by Organization</div>
  <div class="menu">
    <% @organizations.each do |organization| %>
      <div class="item" data-value="<%= organization.id %>"><%= organization.name_or_code %></div>
    <% end %>
  </div>
</div>

型
下面是_status_table.html.erb的其余部分

<table id="profilesStatusTable" class="ui celled table">  
  <%= render partial: 'profiles/table_actions' %>
  <thead>
    <tr>
      <th>
        <div class="ui checkbox">
          <%= check_box_tag 'select_all', 1, false, class: "select-all", onclick: "toggleAll(this)" %>
          <label></label>
        </div>
      </th>
      <th>Full Name</th>
      <th>Role</th>
      <th>Email</th>
      <th>Confirmed</th>
      <th>Organisation</th>
      <th>Coder ID</th>
      <th>Created at</th>
      <th>Last Updated</th>
      <th>Last Login at</th>
      <th>Login Count</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <% @profiles.each do |profile| %>
      <tr class="<%= cycle('row', 'alt-row') %>">
        <td><%= check_box_tag 'delete[]', profile.user.id %><label></label></td>
        <td><%= profile.user.full_name %></td>
        <td><%= role_as_string(profile.role_key) %></td>
        <td><%= profile.user.email %></td>
        <td>
          <span class="ui <%= profile.user.confirmed ? 'teal' : 'red'%> empty circular label"></span>
        </td>
        <td><%= profile.organisation.name_or_code %></td>
        <td><%= profile.coder_id.present? ? profile.coder_id : 'N/A' %></td>
        <td><%= localise_and_pretty_print(profile.user.created_at) %></td>
        <td><%= localise_and_pretty_print(profile.user.updated_at) %></td>
        <td><%= localise_and_pretty_print(profile.user.last_login_at) %></td>
        <td><%= profile.user.login_count %></td>
        <td>
          <%= link_to admin_edit_user_path(profile.user), class: "icon-action", title: "Edit" do %>
            <i class="edit icon"></i>
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

型
问题是当我从下拉列表中选择一个值时，它显示空表，我确实在onchange() function内输入了console.log("selectedOrganizationId");，它打印了正确的值。
我是指this部分和实现以上代码，请帮助我，如果你能