处理数据值过滤器（JS）

时间：2018-08-10 06:45:53

标签： javascript jquery html

我有一张桌子，我需要过滤

这是代码段

var this_value = "Value1";
$('input').click(function()
{
    $('td:contains('+this_value+')').parent().toggle();
});

$(document).ready(function () {
    var $rows = $('tbody#report tr')
   
     var $filters = $('.table-filter').change(function(){
       var filterArr = $filters.filter(function(){
          return this.value
       }).map(function(){
          var $el = $(this);
          var value = $el.is('select') ? $el.find(':selected').text() :$el.val()  
          return {
            col: $el.data('col'),
            value: value.toLowerCase()
          }
       }).get();
       if(!filterArr.length){
         $rows.show()
       }else{
         $rows.hide().filter(function(){
            var $row = $(this)
            return filterArr.every(function(filterObj, i){
               var cellText = $row.find('td').eq(filterObj.col).text().toLowerCase();             
              return  cellText.includes(filterObj.value);
            })
         }).show()
       }
     })
   

});

我不能很好地处理文本搜索，它是3和4个选择字段，但是我无法处理日期。

我正试图这样做

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>

<div class="row">
        <div class="col-md-3">
            <h4>Date from</h4>
            <input type="date" class="table-filter form-control" id="datefilterfrom" data-date-split-input="true"  data-col="1">
        </div>
        <div class="col-md-3">
            <h4>Date to</h4>
            <input type="date"  class="table-filter form-control" id="datefilterto" data-date-split-input="true">
        </div>
        <div class="col-md-2">
            <h4>Project</h4>
           <select id="projectfilter" name="projectfilter" class="table-filter form-control" data-col="2">
             <option value="">Select one</option>
             <option value="1">Test project</option><option value="2">Test2</option></select>
        </div>
     <div class="col-md-2">
            <h4>Service</h4>
           <select id="servicefilter" name="servicefilter" class="table-filter form-control"  data-col="3">
             <option value="">Select one</option>
             <option value="1">Test service</option><option value="2">Test2 service</option></select>
        </div>
    </div>
<table id="testTable" class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Date</th>
                    <th scope="col">Project</th>
                   <th scope="col">Service</th>
               
                </tr>
            </thead>
            <tbody id="report">
              <tr>
                <td class="proposalId">9</td><td> 17/07/2018</td> <td> Test project</td><td> Test service</td>
              </tr>
              <tr><td class="proposalId">8</td><td> 18/07/2018</td><td> Test project</td><td> Test2  service</td></tr>
              <tr><td class="proposalId">7</td><td> 17/07/2018</td><td> Test2</td><td> Test2 service</td></tr>
              <tr style=""><td class="proposalId">3</td><td> 19/07/2018</td><td> Test2</td><td> Test service</td></tr>
              
    </tbody>
        </table>

但是它不能正常工作。我该怎么解决？

这里是my demo codepen snippet，您可以用来对其进行测试

2 个答案:

答案 0 :(得分：2)

您的代码中有许多要纠正的地方：

  • 您用于过滤表中数据的逻辑是错误的，如果 input值被更改，整个过滤器被重置 将此输入值考虑在内，您需要更改逻辑 在那之后。
  • 例如，要获取select值，您只需要$el.val() 而不是写$el.is('select') ? $el.find(':selected').text() :$el.val()。

并且您需要在dates代码中分别处理filter，因为.includes()将比较strings，因此您需要计算和比较date对象在这里。

这应该是您的日期比较代码：

if ($el.prop('type') == 'date') {
  return filterArr.every(function(filterObj, i) {
    var cellText = $row.find('td').eq(filterObj.col).text().toLowerCase();
    if ($el.prop('id') == "datefilterfrom") {
      return new Date(filterObj.value) <= new Date(cellText.split("/")[2], +cellText.split("/")[1] - 1, cellText.split("/")[0]);
    }
    if ($el.prop('id') == "datefilterto") {
      return new Date(filterObj.value) >= new Date(cellText.split("/")[2], +cellText.split("/")[1] - 1, cellText.split("/")[0]);
    }
  })
}

注意：

对于date输入，您需要在过滤器对象中将1作为col值传递，因为表中只有一个日期列：

if ($el.prop('type') == 'date') {
    return {
      col: 1,
      value: value.toLowerCase()
    }
}

演示：

这是一个更新的工作演示。

$(document).ready(function() {
  var $rows = $('tbody#report tr')

  var $filters = $('.table-filter').change(function() {
    var $el = $(this);
    var filterArr = $filters.filter(function() {
      return this.value
    }).map(function() {
      var value = $el.val();
      if ($el.prop('type') == 'date') {
        return {
          col: 1,
          value: value.toLowerCase()
        }
      }
      return {
        col: $el.data('col'),
        value: value.toLowerCase()
      }
    }).get();
    if (!filterArr.length) {
      $rows.show()
    } else {
      $rows.hide().filter(function() {
        var $row = $(this);
        if ($el.prop('type') == 'date') {
          return filterArr.every(function(filterObj, i) {
            var cellText = $row.find('td').eq(filterObj.col).text().toLowerCase();
            if ($el.prop('id') == "datefilterfrom") {
              return new Date(filterObj.value) <= new Date(cellText.split("/")[2], +cellText.split("/")[1] - 1, cellText.split("/")[0]);
            }
            if ($el.prop('id') == "datefilterto") {
              return new Date(filterObj.value) >= new Date(cellText.split("/")[2], +cellText.split("/")[1] - 1, cellText.split("/")[0]);
            }
          })
        } else {
          return filterArr.every(function(filterObj, i) {
            var cellText = $row.find('td').eq(filterObj.col).text().toLowerCase();
            return cellText.includes(filterObj.value);
          })
        }
      }).show()
    }
  })


});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>

<div class="row">
  <div class="col-md-3">
    <h4>Date from</h4>
    <input type="date" class="table-filter form-control" id="datefilterfrom" data-date-split-input="true" data-col="1">
  </div>
  <div class="col-md-3">
    <h4>Date to</h4>
    <input type="date" class="table-filter form-control" id="datefilterto" data-date-split-input="true">
  </div>
  <div class="col-md-2">
    <h4>Project</h4>
    <select id="projectfilter" name="projectfilter" class="table-filter form-control" data-col="2">
      <option value="">Select one</option>
      <option value="1">Test project</option>
      <option value="2">Test2</option>
    </select>
  </div>
  <div class="col-md-2">
    <h4>Service</h4>
    <select id="servicefilter" name="servicefilter" class="table-filter form-control" data-col="3">
      <option value="">Select one</option>
      <option value="1">Test service</option>
      <option value="2">Test2 service</option>
    </select>
  </div>
</div>
<table id="testTable" class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Date</th>
      <th scope="col">Project</th>
      <th scope="col">Service</th>

    </tr>
  </thead>
  <tbody id="report">
    <tr>
      <td class="proposalId">9</td>
      <td> 17/07/2018</td>
      <td> Test project</td>
      <td> Test service</td>
    </tr>
    <tr>
      <td class="proposalId">8</td>
      <td> 18/07/2018</td>
      <td> Test project</td>
      <td> Test2 service</td>
    </tr>
    <tr>
      <td class="proposalId">7</td>
      <td> 17/07/2018</td>
      <td> Test2</td>
      <td> Test2 service</td>
    </tr>
    <tr style="">
      <td class="proposalId">3</td>
      <td> 19/07/2018</td>
      <td> Test2</td>
      <td> Test service</td>
    </tr>

  </tbody>
</table>

答案 1 :(得分：0)

尝试一下

var value = $el.is('select') ? $el.find(':selected').text() : moment($el.val().replace(/(\d{2})\/(\d{2})\/(\d{4}).*/, '$3-$2-$1'), "YYYY-MM-DD").format('DD/MM/YYYY')

例如

 document.write(("17/07/2018").replace(/(\d{2})\/(\d{2})\/(\d{4}).*/, '$3-$2-$1'))

相关问题
最新问题