datatableを使用したカラム検索 - Jquery

私はカラム名（FirstName、LastName、Age、Profession、Salary）を持つテーブルを持っています。私は3つの検索ボックス、すなわち（名、姓、給料）を持っています。datatableを使用したカラム検索 - Jquery

「名前」テキストボックスに「xyz」という名前を入力すると、「xyz」という値はFirstName列でのみ検索されます。同様に、姓の検索ボックスに値 "abcd"を入力すると、値 "abcd"は姓の列のみで検索されます。

jqueryデータ型を使用して上記の機能を達成するにはどうすればよいですか。

サンプルコード //検索テキストボックス

<html><body> 
    <div> 
      <table width='100%'> 
     <tr> 
      <td >First Name:</td> <td id='fname'><input type= "text"></td> 
     </tr> 

      <tr ><td >Last name:</td>  
      <td id="lname"><input type= "text"></td> 
      </tr> 

      <tr ><td >Age:</td>  
      <td id="age"><input type= "text"></td> 
      </tr> 

      <tr ><td >Profession:</td>  
       <td id='prof'><input type= "text"></td> 
      </tr> 

      <tr ><td >Salary:</td> 
       <td id='sal'><input type= "text"></td> 
      </tr> 
      </table> 
    </div>

//表

<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Age</th> 
       <th>Profession</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>Nixon</td> 
       <td>61</td> 
       <td>Engineer</td> 
       <td>320,800</td> 
      </tr> 
      <tr> 
       <td>Garrett</td> 
       <td>Winters</td> 
       <td>63</td> 
       <td>Accountant</td> 
       <td>170,750</td> 
      </tr> 
      <tr> 
       <td>Ashton</td> 
       <td>Cox</td> 
       <td>66</td> 
       <td>Junior Technical Author</td> 
       <td>86,000</td> 
      </tr> 
      <tr> 
       <td>Cedric </td> 
       <td>Kelly</td> 
       <td>22</td> 
       <td>Senior Javascript Developer</td> 
       <td>433,060</td> 
      </tr> 
     <tr> 
       <td>Charde </td> 
       <td>Marshall</td> 
       <td>36</td> 
       <td>Regional Director</td> 
       <td>470,600</td> 
      </tr> 
      <tr> 
       <td>Haley </td> 
       <td>Kennedy</td> 
       <td>43</td> 
       <td>Senior Marketing Designer</td> 
       <td>313,500</td> 
      </tr> 
    </tbody> 
</table> 
</body> 
</html>

// Jquerycode

$(example).dataTable(). 
        columnFilter({aoColumns:[ 
          { sSelector: "#fname"}, 
          { sSelector: "#lname" }, 
          null 
          null, 
          {sSelector: "#sal"}, 
         ]}    
      );

出典

2017-05-03 Vinod babu

コードを共有する場所がいくつかある場合は、少なくとも、何か試してみる必要があります。ちょうど解決のためだけではない –

私達にいくつかのコード/努力/バグを教えてください – OldPadawan

column().search()

var table = $('#example').DataTable(); 

// #column3_search is a <input type="text"> element 
$('#column3_search').on('keyup', function() { 
    table 
     .columns(3) 
     .search(this.value) 
     .draw(); 
});

出典

2017-05-03 12:01:34 xander

ありがとう。 column3_searchでテキストボックスの値を取得する方法を教えてください。上記のコードを繰り返してもいいですか？例： $（ '＃column4_search'）。（ 'keyup'、function（）{ テーブル .columns（4） .search（this.value ） .draw（）; }）;明確にしてください –

この例では 'this.value'を使ってテキストボックスの値にアクセスできます。そうであれば' $（ '＃column3_search'）。val（） 'を使って読むことができます。そして、すべての検索可能な列に対してこれを行う必要があります。現在のコードに依存するループを使用することができます。 – xander

ありがとうございます。それは正常に動作しています。しかし私のプロジェクトでは、filter.jsという列だけが含まれていました。列フィルタを使用して上記の機能をどのように実現できるか教えてください。コードを更新しましたが、機能しません。 –

datatableを使用したカラム検索 - Jquery

答えて

関連する問題