Question

我有以下表格：

<table>
  <tr>
    <th>Number</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>200.10.1234</td>
    <td>Maria Anders</td>
  </tr>
  <tr>
    <td>202.10.9234</td>
    <td>Francisco Chang</td>
  </tr>

</table>

JS：

$('#table').bootstrapTable({ 
   pagination: true,
   search: true,
});

我想实现以下搜索行为：如果用户搜索“2001”或“200.1”，则应显示第一个条目。如果用户搜索“10.1234”或“101234”，则再次显示第一个条目。有没有人知道如何实现这个？

以下是文档：http://bootstrap-table.wenzhixin.net.cn/documentation/

Answer 1

您可以执行以下操作;

＆＃13;

var ftds = document.querySelectorAll("tr > td:first-child"),
  choose = document.getElementById("choose");

choose.addEventListener("change", function isChosen(e) {
  ftds.forEach(function(ftd) {
    var dotless = ftd.textContent.replace(/\./g, "");
    ftd.parentElement.style.backgroundColor = ~ftd.textContent.indexOf(e.target.value) ||
      ~dotless.indexOf(e.target.value) ? "green" : "white";
  });
});

＆＃13;

<table>
  <tr>
    <th>Number</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>200.10.1234</td>
    <td>Maria Anders</td>
  </tr>
  <tr>
    <td>202.10.9234</td>
    <td>Francisco Chang</td>
  </tr>
</table>
<label for="choose">Chose ID:</label>
<input id="choose" required>

＆＃13;

我有点懒，不能添加一个按钮，但是在输入元素的某个位置应该有醒目的标签或点击。

提示：~(-1) === 0;波浪号将-1更改为0（假值）

OK让我们继续使用Bootstrap示例。这次我们将为包含我们搜索的数字的行定义一个类，并将其添加到我们的CSS文件中。让它像是;

.found {
  outline: #2E8B57 solid 1px;
  background-color: #98FB98;
}

现在，如果我们检查每一行中的所有第一个<td>元素（包含数字数据）。如果它不包含，我们将从.found删除parentElement.classList类（如果父元素的类列表没有，则不会抛出任何错误）我们找到了我们正在寻找的内容，然后我们将.found类添加到父元素的类列表中。

很简单..

＆＃13;

var ftds = document.querySelectorAll("tr > td:first-child"),
  choose = document.getElementById("choose");

choose.addEventListener("change", function isChosen(e) {
  ftds.forEach(function(ftd) {
    var dotless = ftd.textContent.replace(/\./g, "");
    ~ftd.textContent.indexOf(e.target.value) ||
    ~dotless.indexOf(e.target.value)          ? ftd.parentElement.classList.add("found")
                                              : ftd.parentElement.classList.remove("found");
  });
});

＆＃13;

.found {
  outline: #2E8B57 solid 1px;
  background-color: #98FB98;
}

＆＃13;

<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Number</th>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>200.10.1234</td>
          <td>Maria</td>
          <td>Anders</td>
        </tr>
        <tr>
          <td>202.10.9234</td>
          <td>Fransisco</td>
          <td>Chang</td>
        </tr>
        <tr>
          <td>203.10.5678</td>
          <td>Fabrio</td>
          <td>Donetti</td>
        </tr>
      </tbody>
    </table>
  </div>
  <label for="choose">Search ID:</label>
  <input id="choose" required>
</body>

</html>

＆＃13;

Answer 2

@Lahmacun，我已经链接了一个实现引导表的codeply project。所有这些代码都可以在您提供的网站的文档中找到。实际上，您正在寻找的搜索功能已经融入其中;无需编写任何自定义代码。您只需将data-search属性设置为true即可将其调用。

HTML代码：

<table id="table" data-url="" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true">
</table>

JavaScript代码：

$('#table').bootstrapTable({
    columns: [{
        field: 'number',
        title: 'Number'
    }, {
        field: 'name',
        title: 'Name'
    }],
    data: [{
        id: 1,
        number: '200.10.1234',
        name: 'Maria Anders'
    }, {
        id: 2,
        number: '202.10.9234',
        name: 'Francisco Chang'
    }]
});

引导表自定义搜索

2 个答案: