2

私は現在、Datatablesの使用を含むWebサイトに取り組んでいます。たくさんカスタマイズした後は、通常のSERPのように見えます。

実装したい機能： ページの読み込み時に、入力ボックスのみを表示し、検索文字列が入力されるまでデータ行を非表示にする必要があります。

したがって、実際には、既知の検索エンジンで見られるように動作するはずです。datatablesのフォーラムやここで情報が見つかりませんでした。

jQuery keypress（）を使用しようとしましたが、機能しませんでした。キーを押してテーブルを非表示にしてみましたが、まったく機能しませんでした（開始するためだけに）。

$("#inputbox").keypress(function () {
      $("table.display").css("display":"none");
    });

ただし、トグルは正常に機能します。

$("#button").click(function () {
      $("table.display").slideToggle();
    });

だから問題はどういうわけか入力ボックスと私が推測するキープレス機能にあります。

ここでいくつかのフィードバックを得ることができて本当にうれしいです。

4

2 に答える 2

1

このようなもの？

$('table tr').hide();
$('input').keypress(function(e) {
    $('table td:contains("'+String.fromCharCode(e.charCode)+'")').closest('tr').show();
});

ノート：

    「コールバック」関数（ここでは「e」ですが、どのキーが押されたかを取得するために「イベント」という名前を付けることができます）でイベントを渡す必要があります
    この特定の例では、いずれかの行に存在する文字が押されるとすぐに全行が表示されます。

データテーブルプラグインフィルタリングを使用する場合は、テーブルを「データテーブル化」するときに編集 できます。

var yourDataTable = $('#yourDataTable').dataTable({...});
var dummySearchString = 'this.will.never.be.found.mwhahahahhaaa';
yourDataTable.fnFilter(dummySearchString);
$('.dataTables_filter input').css('color', 'white');
$('.dataTables_wrapper').delegate('.dataTables_filter input', 'focus', function () {
    if (this.value === dummySearchString) 
    {
        this.value='';
        $(this).css('color', 'black');    
        yourDataTable.fnFilter('');  // only if you want the table to appear when you click the search field
    }
});

基本的に、テーブルが「データテーブル化」された直後に、プラグインに検索を適用するように依頼します（「存在しない」値を検索するように依頼します）。したがって、プラグインはすべての行を「非表示」にします。本当に素敵なことに、テキストの色は白に設定されているため、入力ボックスには表示されません。

于 2011-11-02T12:49:11.117 に答える
0

行があるという事実に応じて、テーブルを非表示/表示できます。

$('table').hide();
$('#inputbox').keyup(function(e) {
   var numRows = $('table tr').length;
   if(numRows >0){
    $('table').show();
   }else{
     $('table').show();    
   }
});

この場合、datatablesフィルタリングエンジンを使用してテーブルをフィルタリングしていると仮定します（これは、データを自分でフィルタリングする代わりに行う必要があります）

于 2011-11-03T12:15:07.760 に答える