2017-08-08 14 views
0

私はPHPのページとテーブルを持っています。ここで私はデータベースからデータを入力します。テーブルの上に検索フィールドがあり、入力した行をフィルタリングしたいと思っています。ここでテーブルの結果をフィルタリングする

はあなたが少しを使用している

+2

については、以下の機能を使用するように最初の場所の入力フィールドには、あなたは、このコードならば、現在の振る舞いを記述することはできますか?問題/質問は正確に何ですか? –

+0

私はここと全く同じことを達成しようとしています:https://bootsnipp.com/snippets/featured/js-table-filter-simple-insensitive。検索ボックスに入力を開始すると、結果がフィルタリングされます – user2996891

+0

潜在的に大きなテーブルのクライアント(javascript)フィルタリングが悪いパターンです –

答えて

0

https://stackoverflow.com/a/19696936/1406155

..私はそれを正しくフォーマットする方法を理解することができないように私のJavascript

$('#system-search').keyup(function() 
{ 
    var that = this; 
    // affect all table rows on in systems table 
    var tableBody = $('.table table-filter tbody'); 
    var tableRowsClass = $('.table table-filter tbody tr'); 
    $('.search-sf').remove(); 
    tableRowsClass.each(function(i, val) 
    { 
     //Lower text for case insensitive 
     var rowText = $(val).text().toLowerCase(); 
     var inputText = $(that).val().toLowerCase(); 
     if(inputText != '') 
     { 
      $('.search-query-sf').remove(); 
      tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "' 
      + $(that).val() 
      + '"</strong></td></tr>'); 
     } 
     else 
     { 
      $('.search-query-sf').remove(); 
     } 
     if(rowText.indexOf(inputText) == -1) 
     { 
      //hide rows 
      tableRowsClass.eq(i).hide(); 
     } 
     else 
     { 
      $('.search-sf').remove(); 
      tableRowsClass.eq(i).show(); 
     } 
    }); 
    //all tr elements are hidden 
    if(tableRowsClass.children(':visible').length == 0) 
    { 
     tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>'); 
    } 
}); 
不正なコードや書式設定のため申し訳ありません

ですそれにはあまりにも多くのコード。この

<input type="text" id="search" placeholder="Search"> 

と検索

$("#search").keyup(function() { 
    var value = this.value.toLowerCase().trim(); 

    $("table tr").each(function (index) { 
     if (!index) return; 
     $(this).find("td").each(function() { 
      var id = $(this).text().toLowerCase().trim(); 
      var not_found = (id.indexOf(value) == -1); 
      $(this).closest('tr').toggle(!not_found); 
      return not_found; 
     }); 
    }); 
}); 
関連する問題