JQuery表过滤器：Multifilter

时间：2017-06-26 03:25:36

标签： javascript jquery

＆＃13;
＆＃13; 
$('.filterable .filters input').keyup(function(e) {
  /* Ignore tab key */
  var code = e.keyCode || e.which;
  if (code == '9') return;
  /* Useful DOM data and selectors */
  var $inputs = $('.filters input');
  var $input = $(this),

    inputContent = $input.val().toLowerCase(),
    $panel = $input.parents('.filterable'),
    column = $panel.find('.filters th').index($input.parents('th')),
    $table = $panel.find('.table'),
    $rows = $table.find('tbody tr');
   // $rows.show();

  /*reset = false;
  if (code == 8 || code == 46) {
    $rows.show();
    reset = true
  }*/

  $.each($inputs, function(key, elem) {
    value = $(elem).val().toLowerCase();
    $rows.filter(function() {
      if (value.length > 0 && column == (key + 1)) {
        var col_value = $(this).find('td').eq(key + 1).text().toLowerCase();
        if (col_value.indexOf(value) === -1) {
          $(this).hide();
        } /*else if (reset && col_value.indexOf(value) > -1) {
          $(this).show();
        }*/
      }
    });
  });
  });
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="panel panel-primary filterable" style="width:1500px;">
                        <div class="panel-heading" id="list_heading"><table class="table table-bordered table-striped table-hover table-condensed">
                            <thead>
                                <tr class="filters">
                                    <th class="thead"><label id="list_header_action">#
                                    </label></th>
                                    <th class="thead"><input type="text" class="form-control" id="list_head_projectname"></th>
                                    <th class="thead"><input type="text" class="form-control" id="list_head_cardtype"></th>
                                    <th class="thead"><input type="text" class="form-control" id="list_head_cardtype"></th>
                                    <th class="thead"><input type="text" class="form-control" id="list_head_creationdate"></th>
                                    <th class="thead"><input type="text" class="form-control" id="list_head_creationdate"></th>
                                    <th class="thead"><label id="list_header_action">ACTION</label></th>

                                </tr>
                            </thead>
                            <tbody>
                            
                            
                                <tr style="display: table-row;">
                                    <td><input type="checkbox" id="id_2" name="row_check" value="2"></td>
                                    <td> Advait</td>
                                    <td>@home</td>
                                    <td>JACKSON</td>
                                    <td>2017-06-23</td>
                                    <td>Channel,Decision My Loan,Help Me Transition</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/2">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" id="id_6" name="row_check" value="6"></td>
                                    <td> aslj sd wildfm wep</td>
                                    <td>Campaign</td>
                                    <td>PARTNER</td>
                                    <td>2017-06-23</td>
                                    <td>Assist Me with Options,Channel,Help Me Find a Solution</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/6">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                                <tr style="display: table-row;">
                                    <td><input type="checkbox" id="id_3" name="row_check" value="3"></td>
                                    <td> gfg hkj;h oi uvmvgh</td>
                                    <td>Campaign</td>
                                    <td>MCCLAIN</td>
                                    <td>2017-06-23</td>
                                    <td>Capital Markets,Decision My Loan,Help Me Transition</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/3">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                                <tr style="display: table-row;">
                                    <td><input type="checkbox" id="id_4" name="row_check" value="4"></td>
                                    <td> jhgj gklk; mn nbvg tfc kg hj</td>
                                    <td>Campaign</td>
                                    <td>PARTNER:OPEN</td>
                                    <td>2017-06-23</td>
                                    <td>Decision My Loan,Help Me Transition,Manage My Loan</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/4">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                                <tr style="display: table-row;">
                                    <td><input type="checkbox" id="id_1" name="row_check" value="1"></td>
                                    <td> Kishor</td>
                                    <td>@home</td>
                                    <td>DICKEY</td>
                                    <td>2017-06-23</td>
                                    <td>Decision My Loan,Internal Customer</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/1">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                                <tr style="display: table-row;">
                                    <td><input type="checkbox" id="id_7" name="row_check" value="7"></td>
                                    <td> ksld laksdj oiweiom</td>
                                    <td>@home</td>
                                    <td>PARTNER:PALAZZO</td>
                                    <td>2017-06-23</td>
                                    <td>Capital Markets,Channel,Decision My Loan</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/7">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                                <tr style="display: table-row;">
                                    <td><input type="checkbox" id="id_5" name="row_check" value="5"></td>
                                    <td> lkjhkj gy f ftyroutybch hg fl</td>
                                    <td>@home</td>
                                    <td>DICKEY</td>
                                    <td>2017-06-23</td>
                                    <td>Channel,Decision My Loan,Help Me Transition</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/5">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                            
                            </tbody>
                        </table>
                            
                        </form>
                    </div>
＆＃13;
＆＃13;
＆＃13;

我有上面的html和js。我想基于多列的多个值实现表过滤器。我可以在将字符输入列标题时过滤行，但在删除字符时无法执行相同操作。

我将display : none添加到不匹配的行中，同时输入字符，并且在删除字符时无法显示它们。

1 个答案:

答案 0 :(得分：2)

要解决此问题，请在代码中添加以下行。

$rows.show();

在应用过滤器选项之前添加此代码。 您可以在此块之后添加。

inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');

＆＃13;
＆＃13; 
$('.filterable .filters input').keyup(function(e) {
  /* Ignore tab key */
  var code = e.keyCode || e.which;
  if (code == '9') return;
  /* Useful DOM data and selectors */
  var $inputs = $('.filters input');
  var $input = $(this),

    inputContent = $input.val().toLowerCase(),
    $panel = $input.parents('.filterable'),
    column = $panel.find('.filters th').index($input.parents('th')),
    $table = $panel.find('.table'),
    $rows = $table.find('tbody tr');
    $rows.show();

  /*reset = false;
  if (code == 8 || code == 46) {
    $rows.show();
    reset = true
  }*/

  $.each($inputs, function(key, elem) {
    value = $(elem).val().toLowerCase();
    $rows.filter(function() {
      if (value.length > 0) {
        var col_value = $(this).find('td').eq(key + 1).text().toLowerCase();
        if (col_value.indexOf(value) === -1) {
          $(this).hide();
        } /*else if (reset && col_value.indexOf(value) > -1) {
          $(this).show();
        }*/
      }
    });
  });
  });
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="panel panel-primary filterable" style="width:1500px;">
                        <div class="panel-heading" id="list_heading"><table class="table table-bordered table-striped table-hover table-condensed">
                            <thead>
                                <tr class="filters">
                                    <th class="thead"><label id="list_header_action">#
                                    </label></th>
                                    <th class="thead"><input type="text" class="form-control" id="list_head_projectname"></th>
                                    <th class="thead"><input type="text" class="form-control" id="list_head_cardtype"></th>
                                    <th class="thead"><input type="text" class="form-control" id="list_head_cardtype"></th>
                                    <th class="thead"><input type="text" class="form-control" id="list_head_creationdate"></th>
                                    <th class="thead"><input type="text" class="form-control" id="list_head_creationdate"></th>
                                    <th class="thead"><label id="list_header_action">ACTION</label></th>

                                </tr>
                            </thead>
                            <tbody>
                            
                            
                                <tr style="display: table-row;">
                                    <td><input type="checkbox" id="id_2" name="row_check" value="2"></td>
                                    <td> Advait</td>
                                    <td>@home</td>
                                    <td>JACKSON</td>
                                    <td>2017-06-23</td>
                                    <td>Channel,Decision My Loan,Help Me Transition</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/2">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" id="id_6" name="row_check" value="6"></td>
                                    <td> aslj sd wildfm wep</td>
                                    <td>Campaign</td>
                                    <td>PARTNER</td>
                                    <td>2017-06-23</td>
                                    <td>Assist Me with Options,Channel,Help Me Find a Solution</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/6">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                                <tr style="display: table-row;">
                                    <td><input type="checkbox" id="id_3" name="row_check" value="3"></td>
                                    <td> gfg hkj;h oi uvmvgh</td>
                                    <td>Campaign</td>
                                    <td>MCCLAIN</td>
                                    <td>2017-06-23</td>
                                    <td>Capital Markets,Decision My Loan,Help Me Transition</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/3">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                                <tr style="display: table-row;">
                                    <td><input type="checkbox" id="id_4" name="row_check" value="4"></td>
                                    <td> jhgj gklk; mn nbvg tfc kg hj</td>
                                    <td>Campaign</td>
                                    <td>PARTNER:OPEN</td>
                                    <td>2017-06-23</td>
                                    <td>Decision My Loan,Help Me Transition,Manage My Loan</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/4">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                                <tr style="display: table-row;">
                                    <td><input type="checkbox" id="id_1" name="row_check" value="1"></td>
                                    <td> Kishor</td>
                                    <td>@home</td>
                                    <td>DICKEY</td>
                                    <td>2017-06-23</td>
                                    <td>Decision My Loan,Internal Customer</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/1">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                                <tr style="display: table-row;">
                                    <td><input type="checkbox" id="id_7" name="row_check" value="7"></td>
                                    <td> ksld laksdj oiweiom</td>
                                    <td>@home</td>
                                    <td>PARTNER:PALAZZO</td>
                                    <td>2017-06-23</td>
                                    <td>Capital Markets,Channel,Decision My Loan</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/7">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                                <tr style="display: table-row;">
                                    <td><input type="checkbox" id="id_5" name="row_check" value="5"></td>
                                    <td> lkjhkj gy f ftyroutybch hg fl</td>
                                    <td>@home</td>
                                    <td>DICKEY</td>
                                    <td>2017-06-23</td>
                                    <td>Channel,Decision My Loan,Help Me Transition</td>
                                    <td>
                                    <a id="todo_edit" class="btn btn-sm btn-default" href="/5">
    <span class="glyphicon glyphicon-edit"></span>
 Edit</a>




                                    </td>
                                </tr>
                            
                            </tbody>
                        </table>
                            
                        </form>
                    </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题