时间戳

首页 > 解决方案 > 如何从特殊列jQuery的选项中过滤数据

javascript - 如何从特殊列jQuery的选项中过滤数据

问题描述

我使用表中的过滤数据，并创建用于过滤数据的脚本。

但问题是脚本过滤所有表中的数据，但我只需要过滤特殊行中的数据。

因为我有些行我可以有相同的值，过滤器将无法正常工作。

$('#test213').click(function() {
  getSelectedVal()
  filterData()
});

var filters = [];

function getSelectedVal() {
  var startDate = $('#option1 option:selected').text()
  var duetDate = $('#option2 option:selected').text()
  var templateName = $('#option3 option:selected').text()
  var status = $('#option4 option:selected').text()

  applyFilter(startDate)
  applyFilter(duetDate)
  applyFilter(templateName)
  applyFilter(status)
}

function applyFilter(value) {
  if (value)
    filters.push(':contains(' + value + ')')
}


function filterData() {
  if (filters.length > 0) {
    var rows = $("#shelulerData").find("tr").hide();
    var currentFilter = null;
    filters.forEach(filter => {
      if (currentFilter === null) {
        currentFilter = rows.filter(filter)
      } else {
        currentFilter = currentFilter.filter(filter)
      }
    })
    currentFilter.show()
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option1">
  <option></option>
  <option>Thulasiram.S</option>
  <option>ST Ram</option>
  <option>Ram Kumar.S</option>
  <option>Dinesh Kumar.S </option>
</select>

<select id="option2">
  <option></option>
  <option>11</option>
  <option>21</option>
  <option>30</option>
</select>

<select id="option3">
  <option></option>
  <option>Chess</option>
  <option>Cricket</option>
</select>
<select id="option4">
  <option></option>
  <option>Day</option>
  <option>Month</option>
  <option>Week</option>
</select>
<button id="test213">Add filter</button>
<table id="ticketList">
  <thead>
  </thead>
  <tbody id="shelulerData">
    <tr>
      <th>Fullname</th>
      <th>Age</th>
      <th>Sport</th>
      <th>Class </th>
      <th>Term</th>
    </tr>
    <tr class="filter-row" data-age="11" data-class="1" data-term="Day">
      <td>Thulasiram.S30</td>
      <td>11</td>
      <td>Chess</td>
      <td>1</td>
      <td>Day</td>
    </tr>
    <tr class="filter-row" data-age="11" data-class="1" data-term="Month">
      <td>ST Ram</td>
      <td>11</td>
      <td>Cricket</td>
      <td>1</td>
      <td>Month</td>
    </tr>
    <tr class="filter-row" data-age="21" data-class="2" data-term="Day">
      <td>Ram Kumar.S 30</td>
      <td>21</td>
      <td>Chess</td>
      <td>2</td>
      <td>Day</td>
    </tr>
    <tr class="filter-row" data-age="30" data-class="3" data-term="Week">
      <td>Dinesh Kumar.S</td>
      <td>30</td>
      <td>Chess</td>
      <td>3</td>
      <td>Week</td>
    </tr>
  </tbody>
</table>

因此，如果我将过滤值30，我需要在第 2 行中找到它，它将在表中找到所有值，但我只需要在这一行中。

标签： javascriptjquery

解决方案

  • 您需要知道哪个过滤器对应于哪个列

    为此，请给每一列 aclass/id并将其传递给您的applyFilter函数。

  • 然后在该特定列中搜索过滤器值并决定是否需要显示该行。即如果用户想按年龄过滤，则在表中搜索年龄列并显示与过滤年龄匹配的所有行。

查看下面修改后的代码。

$('#test213').click(function() {
  getSelectedVal()
  filterData()
});

var filters = [];

function getSelectedVal() {
  var startDate = $('#option1 option:selected').text()
  var duetDate = $('#option2 option:selected').text()
  var templateName = $('#option3 option:selected').text()
  var status = $('#option4 option:selected').text()

  applyFilter(startDate,1)
  applyFilter(duetDate,2)
  applyFilter(templateName,1)
  applyFilter(status,2)
}

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


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

    filters.forEach(filter => {
      $("#shelulerData td"+filter).parent().show();
    })
    
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option1">
  <option></option>
  <option>Thulasiram.S</option>
  <option>ST Ram</option>
  <option>Ram Kumar.S</option>
  <option>Dinesh Kumar.S </option>
</select>

<select id="option2">
  <option></option>
  <option>11</option>
  <option>21</option>
  <option>30</option>
</select>

<select id="option3">
  <option></option>
  <option>Chess</option>
  <option>Cricket</option>
</select>
<select id="option4">
  <option></option>
  <option>Day</option>
  <option>Month</option>
  <option>Week</option>
</select>
<button id="test213">Add filter</button>
<table id="ticketList">
  <thead>
  </thead>
  <tbody id="shelulerData">
    <tr>
      <th>Fullname</th>
      <th>Age</th>
      <th>Sport</th>
      <th>Class </th>
      <th>Term</th>
    </tr>
    <tr class="filter-row" data-age="11" data-class="1" data-term="Day">
      <td class="col1">Thulasiram.S30</td>
      <td class="col2">11</td>
      <td>Chess</td>
      <td>1</td>
      <td>Day</td>
    </tr>
    <tr class="filter-row" data-age="11" data-class="1" data-term="Month">
      <td class="col1">ST Ram</td>
      <td class="col2">11</td>
      <td>Cricket</td>
      <td>1</td>
      <td>Month</td>
    </tr>
    <tr class="filter-row" data-age="21" data-class="2" data-term="Day">
      <td class="col1">Ram Kumar.S 30</td>
      <td class="col2">21</td>
      <td>Chess</td>
      <td>2</td>
      <td>Day</td>
    </tr>
    <tr class="filter-row" data-age="30" data-class="3" data-term="Week">
      <td class="col1">Dinesh Kumar.S</td>
      <td class="col2">30</td>
      <td>Chess</td>
      <td>3</td>
      <td>Week</td>
    </tr>
  </tbody>
</table>

推荐阅读