基于JavaScript的高级表搜索

时间:2016-09-15 15:10:27

标签: javascript jquery

我正在寻找一种使用Javascript过滤表格的方法。虽然下面的代码片段是通过使用所有表格的单元格内容进行过滤的,但我正在寻找一种方法来指定一个条件(index = 1),或者仅通过使该函数仅搜索“Index”。

搜索功能由keyup触发。 queryString下面的函数从另一侧获取一个ID,并且应该预先过滤该表。有没有办法预先/重新触发搜索功能?

$(document).ready(function() {
  $("#search").keyup(function () {
    var searchTerm = $("#search").val();
    var listItem = $('.results tbody').children('tr');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

    $.extend($.expr[':'], {'containsi': function(elem, i, match, array){
          return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
      }
    });
      
    $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
      $(this).attr('visible','false');
    });

    $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
      $(this).attr('visible','true');
    });

    // Search Count item hits
    var jobCount = $('.results tbody tr[visible="true"]').length;
    $('.counter').text(jobCount + ' item');
    if(jobCount == '0') {$('.no-result').show();}
      else {$('.no-result').hide();}
  });

  // Parameter Passing
  var queryString = new Array();
  $(function() {
    if (queryString.length == 0) {
        if (window.location.search.split('?').length > 1) {
            var params = window.location.search.split('?')[1].split('&');
            for (var i = 0; i < params.length; i++) {
                var key = params[i].split('=')[0];
                var value = decodeURIComponent(params[i].split('=')[1]);
                queryString[key] = value;
            }
        }
    }
    
        
    if (queryString["id"] != null) {
         $('#search').val(queryString["id"])
    }
  });
});
.results tr[visible='false'],
.no-result{
  display:none;
}

.results tr[visible='true']{
  display:table-row;
}

.counter{
  padding:8px; 
  color:#ccc;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group pull-right">
        <input type="text" class="form-control" id="search" placeholder="search">
      </div>
      <span class="counter pull-right"></span>
<table class="table table-condensed table-hover results">
        <thead>
          <tr>
            <th>Index</th>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
          </tr>
            <tr class="warning no-result">
              <td colspan="4"><i class="fa fa-warning"></i> No result</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>112</td>
            <td>Content112</td>
            <td>Content2</td>
            <td>Content329</td>
          </tr>
          <tr>
            <td>123</td>
            <td>SomeOtherContent112</td>
            <td>SomeOtherContent123</td>
            <td>SomeOtherContent3</td>
          </tr>
          <tr>
            <td>329</td>
            <td>CompletelyDifferentContent123</td>
            <td>CompletelyDifferentContent2</td>
            <td>CompletelyDifferentContent329</td>
          </tr>
        </tbody>
      </table>

0 个答案:

没有答案