CODEWITHSUNDEEP
javascriptjquerybootstrap-4bootstrap-table
Lahmacun
Lahmacun

Reputation: 107

bootstrap table custom search

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:

$('#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. If the user search for "10.1234" or "101234" then again the first entry shall be shown. Does anybody have an idea how to implement this?

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

Upvotes: 3

Views: 5126

Answers (2)

Redu
Redu

Reputation: 26191

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; tilde changes -1 to 0 (falsey value)

OK lets carry on with a Bootstrap example. This time we will define a class for the row that contains the number we search and add it to our CSS file. 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. 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.

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>

Upvotes: 2

Jade Cowan
Jade Cowan

Reputation: 2583

@Lahmacun, I've linked a codeply project that implements the bootstrap table. 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.

HTML Code:

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

JavaScript Code:

$('#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'
    }]
});

Upvotes: 0

Related Questions