根据多个下拉列表选择过滤表格

Question

我已经使用数据表创建了表。所以我想根据多个下拉选择来过滤表。 但我有多个具有相同数据的表。实际上列太多了，所以为了避免滚动，我将表格添加到多个选项卡中。

Like: In TAB1 (columns : ID, Origin, Destination) | TAB2 (columns : ID , Driver Type, Product Type) etc..

这是我的下拉 html 代码：

<div class="row">
  <div class="col">
    
    <div class="input-group mb-6">
      <span style="padding: 4px 10px ;">Route Volume ></span>
      <input type="number" id="filterByVolumeAddOne" class="form-control" style="max-width: 80px; padding: 1px;margin-right: 1em;" aria-describedby="basic-addon1">


      <select class="form-control ml-3" style="width: 15em !important; margin-left: 10px !important;" id="productFilterDropdown" multiple>
        {% for op in products %}
        <option value="{{op.product_name}}">{{op.product_name}}</option>
        {% endfor %}
      </select>
      
      <select class="form-control ml-3" style="width: 20em !important;" id="equipmentFilterDropdown" multiple>
        {% for op in Equipments %}
        <option value="{{op.equipment_name}}">{{op.equipment_name}}</option>
        {% endfor %}
      </select>

      <select class="form-control ml-3 mr-3" style="width: 15em !important;" id="driverFilterDropdown" multiple>
        {% for op in drivers %}
        <option value="{{op.driver_type}}">{{op.driver_type}}</option>
        {% endfor %}
      </select>


        <div class="input-group-prepend">
          <span class="input-group-text" id="filterByVolumeGreater" style="background-color: #2980b9; color: aliceblue; padding: 6px; cursor: pointer;"><i class="fa fa-arrow-right"></i></span>
        </div>
     
     
     
    </div>
  </div>

  </div>

TAB1的表格html代码：

<table class="table dataTable table-striped table-bordered" id="routeData">
            <thead class="thead-dark">
              <tr>
                <th style="z-index: 2 !important;"></th>
                <th style="z-index: 2 !important;">OPCO</th>
                <th style="z-index: 2 !important;">Route ID</th>
                <th>Origin</th>
                <th>Destination</th>
                <th>Product Type</th>
                <th>Business Segment</th>
                <th>Transport Type</th>
                <th>Transport Movement Type</th>
                <th>Annual Volume</th>
                <th>Freight Cost/Unit</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {% for d in route_obj.itertuples %}
              <tr id="{{d.id}}">
                <td style="background-color: white !important;" class="id">{{forloop.counter}}</td>
                <td style="background-color: white !important;">
                  <span class="editSpan route_opco">{{d.opco__opco_name}}</span>
                  <select class="form-control editInput route_opco" name="route_opco" style="display: none; width: max-content !important;">
                    {% for c  in opco %}
                      <option value="{{c}}">{{c}}</option>
                    {% endfor %}
                  </select>
                <small class="text-danger" id="err-route_opco"></small>
                </td>
                <td style="background-color: white !important;">
                  <span class="editSpan routeid">{{d.routeid}}</span>
                  <input class="form-control editInput routeid" type="text" id="routeid" name="routeid" value="{{d.routeid}}" style="display: none; width: max-content !important;"> 
                  <small class="text-danger" id="err-routeid"></small>
                </td>
                <td>
                  <span class="editSpan origin">{{d.source}}</span>
                  <input class="form-control editInput origin" type="text" id="origin" name="origin" value="{{d.source}}" style="display: none; width: max-content !important;"> 
                  <small class='text-danger' id='err-origin'></small>
                </td>
                <td>
                  <span class="editSpan destination">{{d.destination}}</span>
                  <input class="form-control editInput destination" type="text" name="destination" id="destination" value="{{d.destination}}" style="display: none; width: max-content !important;"> 
                  <small class='text-danger' id='err-destination'></small>
                </td>
                <td>
                  <span class="editSpan product_type">{{d.product_id_id__product_name}}</span>
                  <select class="form-control editInput product_type" name="product_type" style="display: none; width: max-content !important;">
                    {% for c  in product_type %}
                    <option {% if c.product_name == d.product_id_id__product_name %} selected="selected" {% endif %} value="{{c.product_name}}">{{c.product_name}}</option>
                    {% endfor %}
                  </select>
                  <small class='text-danger' id='err-product_type'></small>
                </td>
                <td>
                  <span class="editSpan business_Segment">{{d.product_id_id__business_id__name}}</span>
                  <select class="form-control editInput business_Segment" name="business_Segment" style="display: none; width: max-content !important;">
                    {% for c  in business_segment %}
                    <option {% if c.business_segment__name == d.business_Segment %} selected="selected" {% endif %} value="{{c.business_segment__name}}">{{c.business_segment__name}}</option>
                    {% endfor %}
                  </select>
                  <small class='text-danger' id='err-business_Segment'></small>
                </td>
                <td>
                  <span class="editSpan transport_movement_type">{{d.transport_movement_type}}</span>
                  <input class="form-control editInput transport_movement_type" type="text" id="transport_movement_type" name="transport_movement_type" value="{{d.transport_movement_type}}" style="display: none; width: max-content !important;">
                  <small class='text-danger' id='err-transport_movement_type'></small>
                </td>
                <td>
                  <span class="editSpan transport_type">{{d.transport_type}}</span>
                  <input class="form-control editInput transport_type" type="text" id="transport_type" name="transport_type" value="{{d.transport_type}}" style="display: none; width: max-content !important;">
                  <small class='text-danger' id='err-transport_type'></small>
                </td>
                <td>
                  <span class="editSpan annual_volume">{{d.annualVolume}}</span>
                  <input class="form-control editInput annual_volume" type="number" id="annual_volume" name="annual_volume" value="{{d.annualVolume}}" style="display: none; width: max-content !important;">
                  <small class='text-danger' id='err-annual_volume'></small>
                </td>
                <td>
                  <span class="editSpan freight_cost">{{d.freightCost}}</span>
                  <input class="form-control editInput freight_cost" type="number" id="freight_cost" name="freight_cost" value="{{d.freightCost}}" style="display: none; width: max-content !important;">
                  <small class='text-danger' id='err-freight_cost'></small>
                </td> 
                <td> 
                  <i class='fa fa-edit editRoteInfoBtn' style="cursor: pointer;"></i>
                  <i class='fa fa-trash pl-3 deleteRouteBtn' style="cursor: pointer;"></i>
                  <!-- <button type="button" class="btn btn-primary editBtn">Edit</button>
                  <button type="button" class="btn btn-secondary deleteBtn">Delete</button>-->
                  <button type="button" class="btn btn-success saveRouteInfoBtn" style="display: none;">Save</button>
                  <button type="button" class="btn btn-danger confirmRouteBtn" style="display: none;">Confirm</button>
                  <button type="button" class="btn btn-secondary cancelRouteBtn" style="display: none;">Cancel</button>
                </td>
                
              </tr>
              {% endfor %}
            </tbody>
          </table>

因此，当我选择任何过滤器选项时，我想过滤所有选项卡表格。 我尝试使用数据表 API 搜索功能，但它不起作用。 有关如何使用过滤器选项过滤所有选项卡表格的任何建议。

在这里你可以看到前端：

提前感谢！

Answer 1

尝试这样，确保您已包含 DataTables 库并将所有选项卡式表格初始化为 DataTables 对象。例如，您可以像这样初始化它们：

   $(document).ready(function() {
    $('#routeData').DataTable();
    // Initialize other tables here if needed
});

添加一个事件，当您更改下拉选择中的过滤器时将触发该事件。例如，您可以使用更改事件来捕获选择中的更改：

$('#productFilterDropdown, #equipmentFilterDropdown, #driverFilterDropdown').on('change', function() {
    // Here, add the code to apply the filter to all tables
    // You can get the selected values from the dropdown selections
    var selectedProducts = $('#productFilterDropdown').val();
    var selectedEquipments = $('#equipmentFilterDropdown').val();
    var selectedDrivers = $('#driverFilterDropdown').val();

    // Apply the filter to all tables
    $('#routeData').DataTable().column(5).search(selectedProducts.join('|'), true, false).draw();
    // Apply the filter to other tables if needed

    // Make sure to set the correct column number (5 in my example) and handle all tables.
});

此代码侦听下拉选择中的更改，并将过滤器应用于所有数据表中的所需列。您需要自定义列号（在我的示例中为 5）以匹配您要在表中应用过滤器的列。

如果您有多个表格，请确保将此代码应用于选项卡中的所有表格。我希望这对你有帮助，再见