过滤会导致显示太多数据

Question

我正在测试下划线库。

这是我的第一个例子：

<!--This is the html code-->
<table id="table" border="1">
    <thead>
    <tr><th>Nombre</th><th>Ciudad</th><th>Edad</th></tr>
    </thead>
</table>

//This is the javascript code for to load the table
var clienList = [
    {name:'Juan' , city:'Madrid', age:27},
    {name:'Peter', city:'Madrid', age:31},
    {name:'Ana'  , city:'Barcelona', age:28},
    {name:'Oscar', city:'Madrid', age:24},
    {name:'Dani' , city:'Bilbao', age:43},
    {name:'Pedro', city:'Valencia', age:25},
    {name:'Pablo', city:'Sevilla' , age:27},
    {name:'Marta', city:'Sevilla' , age:32}
];

我正在使用一个javascript数组加载一个表，当我在中间单元格列（City）中进行onclick时，我应用基于单元格内容的过滤表。但功能性不正确，因为我不知道更新数组。

在应用过滤器时，例如＆＃34; Madrid＆＃34;，将我添加到带有城市＆＃34;马德里＆＃34;的表格数组元素中，但是我跟随看到所有行，只应该显示我与马德里城市的行

// This is event onclick of the city column table
$("#table-client table tr td.filter-city").click(function() {
    var cell = $(this);
    var filterCity = _.where(clienList, {city: cell.text()});

    //clienList.length = 0;

    //uso de underscore
    _.each(filterCity,function(element) {

    $("#table").append("<tbody><tr><td>"+element.name+"</td><td class='filter-city'><a href='#'>"
    +element.city+
    "</a></td><td>"+element.age+"</td></tr></tbody>");
    })       
});

感谢您的帮助，

Answer 1

有一件事可以是case sensitive。因此，如果您搜索madrid，它就不会显示，但只有在您完全搜索Madrid时才会显示。

如果是这种情况，您可以在capitalize页面中使用underscore mixin作为示例。

 _.mixin({
    capitalize: function(string) {
     return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
  }
});

并像

一样使用它

var filterCity = _.where(clienList, {city: _(cell.val()).capitalize()});

您的代码（稍作修改）

＆＃13;

＆＃13;

//This is the javascript code for to load the table
var clienList = [
    {name:'Juan' , city:'Madrid', age:27},
    {name:'Peter', city:'Madrid', age:31},
    {name:'Ana'  , city:'Barcelona', age:28},
    {name:'Oscar', city:'Madrid', age:24},
    {name:'Dani' , city:'Bilbao', age:43},
    {name:'Pedro', city:'Valencia', age:25},
    {name:'Pablo', city:'Sevilla' , age:27},
    {name:'Marta', city:'Sevilla' , age:32}
];
_.mixin({
  capitalize: function(string) {
    return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
  }
});
// This is event onclick of the city column table
$("#search").click(function() {
    var cell = $('#text');
    var filterCity = _.where(clienList, {city: _(cell.val()).capitalize()});
    console.log(filterCity.length);
    //clienList.length = 0;

    //uso de underscore
     $("#table tbody").empty();
    _.each(filterCity,function(element) {
    $("#table").append("<tbody><tr><td>"+element.name+"</td><td class='filter-city'><a href='#'>"
    +element.city+
    "</a></td><td>"+element.age+"</td></tr></tbody>");
    })       
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<input type="text" id="text">
<br>
<input type="button" id="search" value="search">
<br>
<table id="table" border="1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Ciudad</th>
      <th>Edad</th>
    </tr>
  </thead>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的问题是您总是将过滤后的结果添加到表中，而不会清除旧的 因此，您可以稍微修改一下更新表的功能，例如使用replaceWith。

＆＃13;

＆＃13;

//This is the javascript code for to load the table
var clienList = [{
  name: 'Juan',
  city: 'Madrid',
  age: 27
}, {
  name: 'Peter',
  city: 'Madrid',
  age: 31
}, {
  name: 'Ana',
  city: 'Barcelona',
  age: 28
}, {
  name: 'Oscar',
  city: 'Madrid',
  age: 24
}, {
  name: 'Dani',
  city: 'Bilbao',
  age: 43
}, {
  name: 'Pedro',
  city: 'Valencia',
  age: 25
}, {
  name: 'Pablo',
  city: 'Sevilla',
  age: 27
}, {
  name: 'Marta',
  city: 'Sevilla',
  age: 32
}];

// This is event onclick of the city column table
$("#table-client table tr td.filter-city").click(function() {
var cell = $(this);
var filterCity = _.where(clienList, {
  city: cell.text()
});

$("#table tbody").replaceWith("<tbody>" +
  filterCity.reduce(function(acc, element) {
    return acc +
      "<tr><td>" + element.name + "</td><td class='filter-city'><a href='#'>" + element.city +
      "</a></td><td>" + element.age + "</td></tr>"
  }, "") +

  "</tbody>");

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="table-client">
<table >
  <tr>
    <td class="filter-city">Madrid</td>
  </tr>
  <tr>
    <td class="filter-city">Barcelona</td>
  </tr>
  <tr>
    <td class="filter-city">Bilbao</td>
  </tr>
  <tr>
    <td class="filter-city">Valencia</td>
  </tr>
  <tr>
    <td class="filter-city">Sevilla</td>
  </tr>
</table>
  </div>
<!--This is the html code-->
<table id="table" border="1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Ciudad</th>
      <th>Edad</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

更新：另一种方法是在添加之前删除所有子项，例如

＆＃13;

＆＃13;

//This is the javascript code for to load the table
var clienList = [{
  name: 'Juan',
  city: 'Madrid',
  age: 27
}, {
  name: 'Peter',
  city: 'Madrid',
  age: 31
}, {
  name: 'Ana',
  city: 'Barcelona',
  age: 28
}, {
  name: 'Oscar',
  city: 'Madrid',
  age: 24
}, {
  name: 'Dani',
  city: 'Bilbao',
  age: 43
}, {
  name: 'Pedro',
  city: 'Valencia',
  age: 25
}, {
  name: 'Pablo',
  city: 'Sevilla',
  age: 27
}, {
  name: 'Marta',
  city: 'Sevilla',
  age: 32
}];

// This is event onclick of the city column table
$("#table-client table tr td.filter-city").click(function() {
  var cell = $(this);
  var filterCity = _.where(clienList, {
    city: cell.text()
  });

  $("#table tbody").empty();
  //uso de underscore
  _.each(filterCity, function(element) {

    $("#table tbody").append("<tr><td>" + element.name + "</td><td class='filter-city'><a href='#'>" + element.city +
      "</a></td><td>" + element.age + "</td></tr>");
  })

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="table-client">
  <table>
    <tr>
      <td class="filter-city">Madrid</td>
    </tr>
    <tr>
      <td class="filter-city">Barcelona</td>
    </tr>
    <tr>
      <td class="filter-city">Bilbao</td>
    </tr>
    <tr>
      <td class="filter-city">Valencia</td>
    </tr>
    <tr>
      <td class="filter-city">Sevilla</td>
    </tr>
  </table>
</div>
<!--This is the html code-->
<table id="table" border="1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Ciudad</th>
      <th>Edad</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

＆＃13;

＆＃13;

＆＃13;