bootrap表のカスタム検索

私はテーブルを次ていますbootrap表のカスタム検索

<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」または「1」を検索した場合、再び最初のエントリが表示されます。これを実装する方法を知っている人はいますか？ここにdoc：http://bootstrap-table.wenzhixin.net.cn/documentation/

出典

2017-09-01 Lahmacun

？ – lxe

私はdoumentationを読んでいます：http://bootstrap-table.wenzhixin.net.cn/documentation/しかし、私の問題を解決する方法をまだ分かりません。 – Lahmacun

@ラーマクンン、私はcodeply projectをリンクしました。これはブートストラップテーブルを実装しています。このコードはすべて、あなたが提供したWebサイトのドキュメントにあります。実際には、探している検索機能は既に組み込まれています。カスタムコードを書く必要はありません。 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' 
    }] 
});

出典

2017-09-01 22:32:01 cwanjt

ありがとうございました。それでも仕事はしません。私が "2021"と入力すると何も見つかりません。私が "202.1"と入力すると、2番目のエントリが表示されます。私は入力した場合、2番目のエントリが表示されます "2021"（ドットなし） – Lahmacun

正確に：私は入力が "202.1"または "2021" – Lahmacun

次のようにあなたが行うことができます。

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>

私はボタンを追加するには少し怠惰だったが、タブを打つか、input要素のうちのどこかをクリックして行う必要があります。

ヒント：~(-1) === 0;チルダ-1を0に変更します（偽の値）

OKはブートストラップの例で実行します。今回は、検索した番号を含む行のクラスを定義し、それをCSSファイルに追加します。そのようなものにしましょう。

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

ここで、最初の<td>要素（数値データを含む）を各行にチェックすると、それが含まれていない場合、から.foundクラスを削除します（親要素のクラスリストにそれがなければエラーはスローされません）。探しているものが見つかると、親に.foundクラスを追加します要素のクラスリストあなたがこれまでに試してみました何

非常にシンプルな...

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>

出典

2017-09-01 23:43:36 Redu

ありがとう、ありがとう、2番目のエントリが見つかります。それはとてもよく見えます。私はこれをブートストラップテーブルとどのように組み合わせることができるか知っていますか？ – Lahmacun

@Lahmacun私はBootstrap版を添付しました。それが役立つかどうかを見てください。 – Redu

答えて

関連する問題