javascript - jquery excel 像过滤器插件

Question

我正在尝试使 excel 像过滤我的动态表一样。我正在使用这个jquery plugin https://github.com/chestercharles/excel-bootstrap-table-filter。我使用它是因为它类似于 excel 过滤器。

我在用 html 编码的非动态表上进行了尝试，一切正常。但是当我尝试实现从数据库加载时，(php, MSSQL)它给了我这个。

tds[selectedLists[j].column] is undefined

错误出现在此特定功能中：

FilterCollection.prototype.updateRowVisibility = function (filterMenus, rows, ths) {
    var showRows = rows;
    var hideRows = [];
    var selectedLists = filterMenus.map(function (filterMenu) {
        return {
            column: filterMenu.column,
            selected: filterMenu.inputs.filter(function (input) {
                return input.checked;
            }).map(function (input) {
                return input.value.trim().replace(/ +(?= )/g, '');
            })
        };
    });
    for (var i = 0; i < rows.length; i++) {
        var tds = rows[i].children;
        for (var j = 0; j < selectedLists.length; j++) {
            var content = tds[selectedLists[j].column].innerText.trim().replace(/ +(?= )/g, '');
            if (selectedLists[j].selected.indexOf(content) === -1) {
                $(rows[i]).hide();
                break;
            }
            $(rows[i]).show();
        }
    }
};

有谁知道为什么会发生这种情况以及如何纠正它。

标签： javascriptjqueryplugins

Answer 1

你不需要 jquery 来过滤这里是一个例子：

function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

#myInput {
  background-image: url('/css/searchicon.png');
  /* Add a search icon to input */
  background-position: 10px 12px;
  /* Position the search icon */
  background-repeat: no-repeat;
  /* Do not repeat the icon image */
  width: 100%;
  /* Full-width */
  font-size: 16px;
  /* Increase font-size */
  padding: 12px 20px 12px 40px;
  /* Add some padding */
  border: 1px solid #ddd;
  /* Add a grey border */
  margin-bottom: 12px;
  /* Add some space below the input */
}

#myTable {
  border-collapse: collapse;
  /* Collapse borders */
  width: 100%;
  /* Full-width */
  border: 1px solid #ddd;
  /* Add a grey border */
  font-size: 18px;
  /* Increase font-size */
}

#myTable th,
#myTable td {
  text-align: left;
  /* Left-align text */
  padding: 12px;
  /* Add padding */
}

#myTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #f1f1f1;
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>