14

Twitter Bootstrap の単純な検索クエリまたは行フィルターを作成する方法に関するチュートリアルを見つけるのに苦労しています。私は多くのことを試しましたが、何か間違ったことをしているのか、それともプラグインが Bootstrap と互換性がないのかわかりません。できれば助けてください。

私はもう試した：

$(document).ready(function() {
 //Declare the custom selector 'containsIgnoreCase'.
      $.expr[':'].containsIgnoreCase = function(n,i,m){
          return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
      };

      $("#search").keyup(function(){

          $("#tabela").find("tr").hide();
          var data = this.value.split(" ");
          var jo = $("#tabela").find("tr");
          $.each(data, function(i, v){

               //Use the new containsIgnoreCase function instead
               jo = jo.filter("*:containsIgnoreCase('"+v+"')");
          });

          jo.show();

      }).focus(function(){
          this.value="";
          $(this).css({"color":"black"});
          $(this).unbind('focus');
      }).css({"color":"#C0C0C0"});
});

これには何もありません...おそらく、テーブルまたは検索ボックスに「ID」がありません。これは初めてです。

4

2 に答える 2

46

これが私が使用するものです：

$('input.filter').live('keyup', function() {
    var rex = new RegExp($(this).val(), 'i');
    $('.searchable tr').hide();
        $('.searchable tr').filter(function() {
            return rex.test($(this).text());
        }).show();
    });

それを使用するには、「検索可能」クラスの tbody を使用してテーブルを作成し、ページのどこかに「フィルター」クラスの入力を作成します (検索アイコンの背後にある Bootstrap ポップアップに配置することをお勧めします)。

于 2013-02-19T08:06:00.677 に答える