2017-10-06 6 views
0

DataTables jQueryプラグインを使用して、サービスから取得したデータを表示します。私は、フィールドに最初の文字をレターとして含めることができる列に、この番号に基づいて番号とフィルタを入力する必要がある場合があります。フィールドを文字で取得せずに列をフィルタリングしたい。例: 私は私のような列の値を持っている場合:B123 - C753 - 私はを入力してのみ356を返すようにしたいです。これは可能ですか?彼らはすべてのが含まれているとして - C753 - 返された結果がB123次のようになります。上記のコードではフィールドが数字の場合にのみフィルタリングする列(データ型)

function filterMySecondColumn() { 
    $('#my_tbl').DataTable().column(2).search(
     $('#My_Val').val(), // my value to be filtered => it is 3 in the example 
      false, 
      true 
     ).draw(); 
} 

以下は私のコードです。

編集:以下

私のHTMLです。ボタンフィルタをクリックすると、フィルタリングする複数の関数が呼び出されます。それらの1つは 'filterMySecondColumn'です。私のテーブルはajaxを使ったサービスを通して埋められていますが、以下はテンプレートです。

<table id="tblHeaderHomePage" class="tblHeaderHomePage" cellspacing="0" border="0"> 
    <tbody> 
     <tr id="filter_col1" data-column="0"> 
      <td class="FilterTdTitle"> 
       Column 0 
      </td> 
      <td class="FilterTdContent"> 
       <input type="text" autocomplete="off" class="form-control input-sm HomePage_Filter_Input" 
        id="col0_filter" /> 
      </td> 
     </tr> 
     <tr id="filter_col2" data-column="1"> 
      <td class="FilterTdTitle"> 
       Column 1 
      </td> 
      <td class="FilterTdContent"> 
       <input type="text" autocomplete="off" class="form-control input-sm HomePage_Filter_Input" 
        style="width: 85px" id="DateFrom" /> 
       <input type="text" autocomplete="off" class="form-control input-sm HomePage_Filter_Input" 
        style="width: 85px" id="DateTo" /> 
      </td> 
     </tr> 
     <tr id="filter_col3" data-column="2"> 
      <td class="FilterTdTitle"> 
       Column 2 
      </td> 
      <td class="FilterTdContent">         
       <input type="text" class="form-control input-sm HomePage_Filter_Input" id="col2_filter" /> 
      </td> 
     </tr> 
     <tr id="filter_col4" data-column="3"> 
      <td class="FilterTdTitle"> 
       Column 3 
      </td> 
      <td class="FilterTdContent"> 
       <input type="text" autocomplete="off" class="form-control input-sm HomePage_Filter_Input" 
        id="col3_filter" /> 
      </td> 
     </tr> 
     <tr id="filter_col5" data-column="4"> 
      <td class="FilterTdTitle"> 
       Column 4 
      </td> 
      <td class="FilterTdContent"> 
       <select class="BAN_Select_Home" id="Status_Select"> 
        <option value="All">All</option>          
       </select> 
      </td> 
     </tr> 
    </tbody> 
</table> 

<div class="BAN_HomePage_Filter_buttons_div"> 
    <input type="button" class="BAN_HomePage_Filter_buttons" onclick="filter()" value="Filter" />      
</div> 

<table id="My_tbl_init" class="display nowrap" cellspacing="0" width="100%"> 
<thead> 
    <tr> 
     <th> 
      Column 0 
      </th> 
      <th> 
       Column 1 
      </th> 
      <th> 
       Column 2 
      </th> 
      <th> 
       Column 3 
      </th> 
      <th> 
       Column 3 
      </th> 
     </tr> 
    </thead> 
    <tbody id="My_tbl"> 

    <tr> 
     <td> 
      test1 
     </td> 
     <td> 
      06/10/2017 
     </td> 
     <td> 
      B123 
     </td> 
     <td> 
      Opened 
     </td>      
    </tr> 

    <tr> 
     <td> 
      test2 
     </td> 
     <td> 
      06/10/2017 
     </td> 
     <td> 
      C789 
     </td> 
     <td> 
      closed 
     </td>      
    </tr> 

    <tr> 
     <td> 
      test3 
     </td> 
     <td> 
      06/10/2017 
     </td> 
     <td> 
      123 
     </td> 
     <td> 
      closed 
     </td>      
    </tr> 

</tbody> 
</table> 
+0

HTMLも投稿できますか? –

+0

したがって、列2の値をチェックして数字だけのものを取得したいですか? –

+0

はい、正確には私の質問でした –

答えて

1
var x = //value of the column; 
if(Math.floor(x) == x && $.isNumeric(x)){ 
//do the code 
} 

あなたは彼らが、1でループ1に入り、上記のコードをチェックして、数字の1を出てもらわなく。

編集:これはあなたが達成しようとしているものかもしれません。フィルタボタンをクリックするだけで表示されます。 DEMO

+0

正確ですが、どうすればこの関数の列の値を取得できますか? –

+0

あなたはhtmlも共有できますか?私はあなたがそうすれば、これは簡単だろうと信じています。 –

+0

これは完全に検索として動作しますが、上記のコードではうまく動作せず、私のためにテーブルを描画できません。検索機能と描画が一度呼び出され、穴テーブルがフィルタリングされて描画されます。 –

関連する問題