入力テキストを使用してDataTableをフィルタリングする

Question

頭の中にいくつかのスクリプトを含むHTMLページがあり、ID = exampleのDataTableと、ボタンのid = "btnFilter"というデータを持っていますユーザーが他の人の中に入力したものに基づいてDataTable "input texts tags" 私はインターネット上で見つけた多くのバリエーションを試しましたが、私が望むことができるものは何もできません。

<table id="filterLog" class="table table-striped"> 
      <thead> 
       <h4>Table</h4> 
      </thead> 
      <tfoot> 
       <th> 
       </th> 
      </tfoot> 
      <tbody> 
       <tr> 
        <td><label class="input-group">From:</label></td> 
        <td><label class="input-group">To:</label></td> 
        <td><label class="input-group">Created:</label></td> 
        <td><label class="input-group">Comp:</label></td> 
       </tr> 
      </tbody> 
      <tr id="linhasFiltro"> 
       <td><input class="form-control" type="date" id="date1" /></td> 
       <td><input class="form-control" type="date" id="date2" /></td> 
       <td><input class="form-control" type="text" id="creator" maxlength="15" /></td> 
       <td><input class="form-control" type="text" id="cLog" maxlength="10"/></td> 
      </tr> 
      <tr> 
       <td colspan="4"><label class="input-group">Type:</label></td> 
      </tr> 
      <tr> 
       <td colspan="1"> 
        <select id="tipoLog" class="form-control"> 
         <option>Error</option> 
         <option>Test</option> 
         <option>Info</option> 
        </select> 
       </td> 
       <td><input type="button" value="Filter" id="btnFilter" class="btn btn-primary" />&nbsp;&nbsp;<input type="button" id="btnExport" value="Exportar" class="btn btn-primary" /></td> 
      </tr> 
      <tr class="border:0px;"> 
       <td colspan="6" id="consiError" ></td> 
      </tr> 
     </table> 

そして、私が欲しいのは、入力されたID内のときに、ユーザータイプである：ここで

は、ユーザーが彼がフィルタリングしたいテキストを入力します、私は入力とラベルのタグを持っている私のHTMLであり、 = "cLog"をクリックし、btnFiltrarをクリックすると、DataTableは列に相当するテキストが同じ行をすべて表示する必要があります。

のTHXみんな

Answer 1

uはすでにtryied何私たちを見る、あなたの次の質問より具体的にしてみてください。 人々はあなたの解決策を書くべきではありません。あなたが試したものとあなたの問題は何かを書いて、人々があなたを助けるでしょう。

DataTableのプラグインを見てみましょう：DataTableのと https://datatables.net/

の作業例を： https://jsfiddle.net/kt0yotsn/

HTML：

<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
      <td>Tiger Nixon</td> 
      <td>System Architect</td> 
      <td>Edinburgh</td> 
      <td>61</td> 
      <td>2011/04/25</td> 
      <td>$320,800</td> 
     </tr> 
     <tr> 
      <td>Garrett Winters</td> 
      <td>Accountant</td> 
      <td>Tokyo</td> 
      <td>63</td> 
      <td>2011/07/25</td> 
      <td>$170,750</td> 
     </tr> 
     <tr> 
      <td>Ashton Cox</td> 
      <td>Junior Technical Author</td> 
      <td>San Francisco</td> 
      <td>66</td> 
      <td>2009/01/12</td> 
      <td>$86,000</td> 
     </tr> 
     <tr> 
      <td>Cedric Kelly</td> 
      <td>Senior Javascript Developer</td> 
      <td>Edinburgh</td> 
      <td>22</td> 
      <td>2012/03/29</td> 
      <td>$433,060</td> 
     </tr> 
    </tbody> 
</table> 

をJAVASCRIPT：

$(document).ready(function() { 
    $('#example').DataTable(); 
}); 

I上記のコードにn個の追加は、以下のJavaScriptライブラリファイルは、この例で使用するためにロードされます

//code.jquery.com/jquery-1.12.4.js https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

次のCSSライブラリファイルをテーブルのスタイリングを提供するために、この例で使用するためにロードされます

https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css

Answer 2

私はここに掲載、しかし、私はちょうどこのようにそれを行うために管理するので、それがしばらくされている知っています。

function Filter($("#cLog").val()) { 
 
      if (!($("#cLog").val() == "-Default-")) { 
 
       tabelaProjetos.columns().every(function() { 
 
        var columnRelated = dataTableName.column(1); 
 
        if (columnRelated.search() !== $("#cLog").val()) { 
 
         columnRelated 
 
          .search($("#cLog").val()); 
 
        } 
 
       }); 
 
      } 
 
     }

上記すなわちコードは、特定のフォーム内部'input'に基づいて、特定の列をフィルタリングします。だから、他の人の入力を別々にフィルタリングするフィルタ関数を実行し、btnClick eventでこれらの関数をすべて呼び出すことができました。そしてBEHOLDでは、DataTableがフィルタリングされました。

私は誰かを助けることができますし、私の英語は少なくとも読解可能であることをさらに期待しています。

thxx