2017-11-10 14 views
-1

テーブルの特定の列を検索して、データテーブルプラグインなしでjqueryまたはjavascriptを使用して数値の範囲を検索したい。
最小値のテキストボックスと最大値のテキストボックス。特定の列の数値範囲を検索し、範囲外の行を非表示にする

私は特定の列を簡単に検索していますが、範囲を検索する方法はわかりません。

のjavascript:

function SFNAAB_Code() { 

    var input, filter, table, tr, td, i; 
    input = document.getElementById("SFNAAB_CodeInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 

    for (i = 0; i < tr.length; i++) { 
     td = tr[i].getElementsByTagName("td")[1]; 
     if (td) { 
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
       tr[i].style.display = ""; 
      } else { 
       tr[i].style.display = "none"; 
      } 
     } 
    } 
} 

HTML:

var table = $('#myTable').DataTable({ 
     paging: false, 
     info: false 
    }); 

もがSDOMからFを削除:

<input type="text" id="SFNAAB_CodeInput" onkeyup="SFNAAB_Code()" 
placeholder="Search By NAAB Code..."> 

<table id="myTable"> 
    <thead> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.RegNo) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.NAAB_CODE) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.NAME) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.ICC) 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    @foreach (var item in Model) 
    { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.RegNo) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.NAAB_CODE) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.NAME) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.ICC) 
      </td> 
     </tr> 
    } 
     </tbody> 
    </table> 
+0

あなたは 'td.innerHTMLをしたいのチェック – dementis

+0

を言っている場合、私はあなたにあなたが各列が検索するためにTDをしなければならないと思うし、その後OR各条件.toUpperCase().indexOf(filter)> -1'は、存在チェックではなく範囲チェックになりますか? – Taplar

+0

@Taplarはい!どのように最小値と最大値の2つのテキストボックスを持つように変更するのですか? –

答えて

0

は、これらのオプションを使用してプラグインのDataTableの範囲検索を使用して、それを解決しました。
をHERESコード:

$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) { 
    var min = parseInt($('#min').val(), 10); 
    var max = parseInt($('#max').val(), 10); 
    var age = parseFloat(data[3]) || 0; 

    if ((isNaN(min) && isNaN(max)) || 
     (isNaN(min) && age <= max) || 
     (min <= age && isNaN(max)) || 
     (min <= age && age <= max)) 
    { 
     return true; 
    } 
    return false; 
} 
); 

$(document).ready(function() { 
var table = $('#example').DataTable({ 
    paging: false, 
    info: false 
}); 

$('#min, #max').keyup(function() { 
    table.draw(); 
}); 
}); 

datatables Custom filtering - range search

関連する問題