使用數據表的列搜索 - Jquery

我有一個列名稱即（名字，姓氏，年齡，職業，薪金）表。我有3個搜索框即（名字，姓氏，薪金）。使用數據表的列搜索 - Jquery

如果我在FirstName文本框中輸入名稱「xyz」，那麼只應在FirstName列中搜索值「xyz」。同樣，如果我在姓氏搜索框中輸入值「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

真的，至少你必須嘗試一些，如果你在共享你的代碼的地方卡住了一些。不只是簡單的解決方案 –

告訴我們一些代碼/努力/ bug請 – 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'，函數（）{ 表 .columns（4） .search（THIS.VALUE ） .draw（）; }）;請澄清 –

在該示例中，可以使用'this.value'來訪問文本框的值，或者如果您喜歡，可以像使用$（'＃column3_search'）。val（）'的任何地方那樣閱讀它。是的，您需要爲所有可搜索的列執行此操作，您可以使用取決於當前代碼的循環。 – xander

謝謝。它工作正常。但是在我的項目中，他們只包含了列filter.js。你可以讓我知道如何使用列過濾器實現上述功能。我有更新的代碼，但它不工作。 –

使用數據表的列搜索 - Jquery

回答

相關問題