2017-06-15 6 views
0

テーブルレコードの検索結果の数を12または15未満の任意の数に制限したいと思います。これはコードとの距離です。何が間違っているのですか?jQueryを使用してテーブルレコードから検索結果の数を制限する方法は?

JS Fiddleをスタックオーバーフローで投稿しようとしましたが、コードが長すぎて投稿できませんでした。

私は理解を深めるためにJs Fiddleを用意しました。一人で、以下の

jQueryの一部:

$("#search").on("keyup", function() { 
var value = $(this).val(); 
$("table tr").each(function(index) { 
if (index !== 0) { 
    $row = $(this); 
    $row.find('td').each (function() { 
     var id = $(this).text(); 
     if (this.innerHTML.toLowerCase().indexOf(value.toLowerCase()) !== 0) { 

      $row.slice(0,12).hide(); 
     } 
     else { 
      $row.slice(0,12).show(); 
      return false; 
     } 
    }); 

} 
}); 
}); 

ここで私はより良く理解するために準備JSFiddleリンクがあります。

https://jsfiddle.net/5g3yxrz4/

答えて

0

のためだけ追加カウンターを試してみてください:https://jsfiddle.net/5g3yxrz4/5/

$("#search").on("keyup", function() { 
var value = $(this).val(); 
var showRowsLimit = 12; 
var rowsShowing = 0; 
$("table tr").each(function(index) { 
    if (index !== 0) { 
     $row = $(this); 
     $row.find('td').each (function() { 
      var id = $(this).text(); 
      if (this.innerHTML.toLowerCase().indexOf(value.toLowerCase()) !== 0 || rowsShowing>=showRowsLimit) { 
       $row.hide(); 
      } 
      else { 
       $row.show(); 
       rowsShowing++; 
       return false; 
      } 
     }); 
    } 
}); 
}); 
0

あなたはこのようにそれを行うことができます。この1

const max = 12; // Maximum to show 
... 
var i = 0; 
... 
else if(i++ < max) { 
... 

https://jsfiddle.net/5g3yxrz4/3/

示した "TR"

+0

検索ボックスが空の場合、すべてのテーブル結果が表示されます。これは起こらないはずです。これは私の間違いです。 searchboxが空の場合、結果は最大値である12でなければなりません。 –

関連する問題