2017-11-10 31 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:

<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進行搜索,然後或在您若檢查 – dementis

+0

你是說你每個條件要'td.innerHTML .toUpperCase()。indexOf(filter)> -1'是範圍檢查而不是存在檢查? – Taplar

+0

@Taplar是! ,我如何改變它有兩個文本框的最小值和最大值? –

回答

0

解決它使用範圍的搜索數據表插件使用這些選項:

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

,並移除了sDOM的F。
繼承人的代碼:

$.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