时间戳

首页 > 解决方案 > 从选项中过滤列中的数据使用 jQuery

javascript - 从选项中过滤列中的数据使用 jQuery

问题描述

我使用过滤，我有问题，我有 4 个选项输入，其中我有一些需要在表中过滤的数据，现在我只过滤一列的数据，但问题是我是否要再添加一个过滤器，脚本将不起作用，并从最后选择的值中过滤数据。但我需要如果我在选项数据中有 2-4 个选定值正在过滤。

我的代码：JS：

$("#cancelFilters").hide();

$('#filterButton').click(function () {
    getSelectedVal()
    filterData()
    filters = [];
    $("#cancelFilters").fadeIn();
});

var filters = [];

function getSelectedVal() {
    var materialCode = $('#materialCode option:selected').text()
    var plantCode = $('#plantCode option:selected').text()
    var vsCode = $('#vsCode option:selected').text()
    var status = $('#statusCode option:selected').text()

    applyFilter(materialCode, 1)
    applyFilter(plantCode, 2)
    applyFilter(vsCode, 3)
    applyFilter(status, 4)
}

function applyFilter(value, id) {
    if (value)
        filters.push('.column' + id + ':contains(' + value + ')');
}


function filterData() {
    if (filters.length > 0) {
        var rows = $("#orderListData").find("tr").hide();

        filters.forEach(filter => {
            $("#orderListData td" + filter).parent().show();
        })

    }
}

$('#cancelFilters').click(function () {
    var $rows = $('#orderListData tr');
    $rows.show()
    $("#cancelFilters").fadeOut();
});

JSFIddle - https://jsfiddle.net/qunzorez/k3ygL07f/11/

因此，如果在选项号 3 中您将选择023并点击添加过滤器，它将起作用，但如果我选择023和选项号 4已预订，它将仅过滤已预订状态，问题出在哪里？

标签： javascripthtmljquery

解决方案

通过 $("#orderListData td" + filter).parent().show()对每个过滤器进行操作，您实际上是在显示与甚至一个过滤器匹配的每一行。虽然您必须只显示那些可以满足所有过滤器的行。

因此，与其循环filters并检查是否有任何td元素满足它，不如循环rows并检查它是否满足每个过滤器。

使用此代码执行此操作（仅filterData更改功能）

    $("#cancelFilters").hide();

    $('#filterButton').click(function () {
      getSelectedVal()
      filterData()
      filters = [];
      $("#cancelFilters").fadeIn();
    });

    var filters = [];

    function getSelectedVal() {
      var materialCode = $('#materialCode option:selected').text()
      var plantCode = $('#plantCode option:selected').text()
      var vsCode = $('#vsCode option:selected').text()
      var status = $('#statusCode option:selected').text()

      applyFilter(materialCode, 1)
      applyFilter(plantCode, 2)
      applyFilter(vsCode, 3)
      applyFilter(status, 4)
    }

    function applyFilter(value, id) {
      if (value)
        filters.push('.column' + id + ':contains(' + value + ')');
    }


    function filterData() {
      if (filters.length > 0) {
        var rows = $("#orderListData").find("tr");
        rows.hide();
        
        //Check if any row satisfy all filters 
        $.each(rows, (i, row) => {
          if (filters.every(filter => $(row).find(filter).length)) {
            $(row).show();
          }
        })

      }
    }

    $('#cancelFilters').click(function () {
      var $rows = $('#orderListData tr');
      $rows.show()
      $("#cancelFilters").fadeOut();
    });
    .row {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .row::after {
      display: table;
      clear: both;
      content: "";
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
    <div class="col-3"> <input class="form-control" type="text" id="search" placeholder="Search for ...""></div>

        <div class=" col-2">
      <select class="form-control secondary-select" id="materialCode">
        <option></option>
        <option>16014344C</option>
        <option>16016398A</option>
        <option>16009838A</option>
      </select>
      <p><strong>Material Code</strong></p>
    </div>
    <div class="col-2">
      <select class="form-control secondary-select" id="plantCode">
        <option></option>
        <option>0119</option>
        <option>0379</option>
      </select>
      <p><strong>Plant Code</strong></p>
    </div>
    <div class="col-2">
      <select class="form-control secondary-select" id="vsCode">
        <option></option>
        <option>023</option>
        <option>0379</option>
      </select>
      <p><strong>Value Stream Code</strong></p>
    </div>
    <div class="col-2">
      <select class="form-control secondary-select" id="statusCode">
        <option></option>
        <option>BOOKED</option>
        <option>RELEASED</option>
      </select>
      <p><strong>Status</strong></p>
    </div>
    <div class="col-1">
      <button id="filterButton" class="button button-clear butt-heith">
        Apply filters
      </button>
    </div>
  </div>

  <button id="cancelFilters" class="button button-deactivate float-right">
    Cancel filters
  </button>

  <table class="table-editor" id="ordersList">
    <thead>
      <tr>
        <th>Production order code</th>
        <th>Material code</th>
        <th>Target quantity</th>
        <th>Plant code</th>
        <th>Value stream code</th>
        <th>Status</th>
        <th>Release date</th>
        <th>Activation date</th>
        <th>Booking date</th>
        <th>TPT (d)</th>
      </tr>
    </thead>
    <tbody id="orderListData">
      <tr>
        <td>
          <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20943">14298947</a>
        </td>
        <td class="column1">
          11027174A
        </td>
        <td>
          1
        </td>
        <td class="column2">

        </td>
        <td class="column3">
          023
        </td>
        <td class="column4">
          BOOKED
        </td>
        <td>
          2020-03-02 06:57:42
        </td>

        <td></td>

        <td>
          2020-03-02 08:12:22
        </td>
        <td>
          0.1 </td>

      </tr>
      <tr>
        <td>
          <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20944">80150671</a>
        </td>
        <td class="column1">
          11019682A
        </td>
        <td>
          800
        </td>
        <td class="column2">

        </td>
        <td class="column3">
          023
        </td>
        <td class="column4">
          BOOKED
        </td>
        <td>
          2020-03-02 08:02:32
        </td>

        <td></td>

        <td>
          2020-03-02 15:30:51
        </td>
        <td>
          0.3 </td>

      </tr>
      <tr>
        <td>
          <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20945">80150672</a>
        </td>
        <td class="column1">
          15000987A
        </td>
        <td>
          503
        </td>
        <td class="column2">

        </td>
        <td class="column3">

        </td>
        <td class="column4">
          BOOKED
        </td>
        <td>
          2020-03-02 08:28:04
        </td>

        <td></td>

        <td>
          2020-03-13 00:00:00
        </td>
        <td>
          10.6 </td>

      </tr>
      <tr>
        <td>
          <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20946">80150673</a>
        </td>
        <td class="column1">
          11011572E
        </td>
        <td>
          153
        </td>
        <td class="column2">

        </td>
        <td class="column3">
          023
        </td>
        <td class="column4">
          BOOKED
        </td>
        <td>
          2020-03-02 08:30:32
        </td>

        <td></td>

        <td>
          2020-03-06 00:00:00
        </td>
        <td>
          3.6 </td>

      </tr>
      <tr>
        <td>
          <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20947">80150674</a>
        </td>
        <td class="column1">
          18300753C
        </td>
        <td>
          153
        </td>
        <td class="column2">

        </td>
        <td class="column3">

        </td>
        <td class="column4">
          BOOKED
        </td>
        <td>
          2020-03-02 08:30:57
        </td>

        <td></td>

        <td>
          2020-03-10 00:00:00
        </td>
        <td>
          7.6 </td>

      </tr>
      <tr>
        <td>
          <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20948">80150675</a>
        </td>
        <td class="column1">
          11014966C
        </td>
        <td>
          153
        </td>
        <td class="column2">

        </td>
        <td class="column3">
          023
        </td>
        <td class="column4">
          RELEASED
        </td>
        <td>
          2020-03-02 08:31:26
        </td>

        <td></td>

        <td></td>
        <td>
        </td>

      </tr>
      <tr>
        <td>
          <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20949">80150676</a>
        </td>
        <td class="column1">
          11014264D
        </td>
        <td>
          79
        </td>
        <td class="column2">

        </td>
        <td class="column3">

        </td>
        <td class="column4">
          BOOKED
        </td>
        <td>
          2020-03-02 08:33:48
        </td>

        <td></td>

        <td>
          2020-03-06 00:00:00
        </td>
        <td>
          3.6 </td>

      </tr>
      <tr>
        <td>
          <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20950">80150677</a>
        </td>
        <td class="column1">
          18300753C
        </td>
        <td>
          79
        </td>
        <td class="column2">

        </td>
        <td class="column3">
          023
        </td>
        <td class="column4">
          BOOKED
        </td>
        <td>
          2020-03-02 08:34:16
        </td>

        <td></td>

        <td>
          2020-03-10 00:00:00
        </td>
        <td>
          7.6 </td>

      </tr>
      <tr>
        <td>
          <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20951">80150678</a>
        </td>
        <td class="column1">
          11020109B
        </td>
        <td>
          79
        </td>
        <td class="column2">

        </td>
        <td class="column3">

        </td>
        <td class="column4">
          RELEASED
        </td>
        <td>
          2020-03-02 08:34:38
        </td>

        <td></td>

        <td></td>
        <td>
        </td>

      </tr>
      <tr>
        <td>
          <a href="/ProductionOrderManagement/ProductionOrderOperations?productionOrderId=20952">80150679</a>
        </td>
        <td class="column1">
          15001454B
        </td>
        <td>
          100
        </td>
        <td class="column2">

        </td>
        <td class="column3">
          023
        </td>
        <td class="column4">
          BOOKED
        </td>
        <td>
          2020-03-02 08:37:59
        </td>

        <td></td>

        <td>
          2020-03-12 00:00:00
        </td>
        <td>
          9.6 </td>

      </tr>
    </tbody>
  </table>

推荐阅读