引导表自定义搜索

Question

I have following table: 我有以下表格：

<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: JS：

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

I want to implement following search behaviour: if the user search for "2001" or "200.1" then the first entry shall be shown. 我想实现以下搜索行为：如果用户搜索“2001”或“200.1”，则应显示第一个条目。 If the user search for "10.1234" or "101234" then again the first entry shall be shown. 如果用户搜索“10.1234”或“101234”，则再次显示第一个条目。 Does anybody have an idea how to implement this? 有没有人知道如何实现这个？

Here is the doc: http://bootstrap-table.wenzhixin.net.cn/documentation/ 这是doc： http ： //bootstrap-table.wenzhixin.net.cn/documentation/

Answer 1

You may do as follows; 你可以这样做;

 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"; }); });

 <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>

I was a little lazy to add a button but striking tab or clicking somewhere out of the input element should do. 我有点懒，添加一个按钮，但是在输入元素之外的某个地方应该有醒目的标签或点击。

Hint: ~(-1) === 0 ; 提示： ~(-1) === 0 ; tilde changes -1 to 0 (falsey value) 波浪号将-1更改为0（假值）

OK lets carry on with a Bootstrap example. OK让我们继续使用Bootstrap示例。 This time we will define a class for the row that contains the number we search and add it to our CSS file. 这次我们将为包含我们搜索的数字的行定义一个类，并将其添加到我们的CSS文件中。 Let it be something like; 让它成为像;

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

Now if we check all first <td> elements (which contains the number data) in each row. 现在，如果我们检查每一行中的所有第一个<td>元素（包含数字数据）。 If it doesn't contain we will remove the .found class from the parentElement.classList (if the parent element's class list doesn't have it no error will be thrown) if we find what we are looking for then we will add .found class to the parent element's class list. 如果它不包含，我们将从parentElement.classList删除.found类（如果父元素的类列表没有它将不会抛出错误）如果我们找到我们正在寻找的东西，那么我们将添加.found class到父元素的类列表。

Very simple.. 很简单..

 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"); }); });

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

 <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>

Answer 2

@Lahmacun, I've linked a codeply project that implements the bootstrap table. @Lahmacun，我已经链接了一个实现bootstrap表的codeply项目。 All of this code can be found in the documentation for the website that you've provided. 所有这些代码都可以在您提供的网站的文档中找到。 In fact, the search functionality you're looking for is already baked into it; 实际上，您正在寻找的搜索功能已经融入其中; no need to write any custom code. 无需编写任何自定义代码。 You just have to call it by setting the data-search attribute to true . 您只需将data-search属性设置为true即可调用它。

HTML Code: HTML代码：

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

JavaScript Code: 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 个解决方案

解决方案1
2 2017-09-01 23:43:36

解决方案2
0 2017-09-01 22:32:01

引导表自定义搜索

问题描述

2 个解决方案

解决方案1 2 2017-09-01 23:43:36

解决方案2 0 2017-09-01 22:32:01

解决方案1
2 2017-09-01 23:43:36

解决方案2
0 2017-09-01 22:32:01