Jqueryのデータ型の文字列フィルタ

Question

以下のコードはうまく動作し、すべてのデータを取得します。私はいくつかのフィルタ文字列をデータテーブル（sample_container）に挿入したいと思います。したがって、sample_appを指定すると、ページが読み込まれたときにsample_containerデータテーブル用のいくつかのフィルタ文字列（filter1、filter2）を使用して自動的にフィルタをかけたいとします。何か案は？

$("#sample_container").html("<h2>Sample libs</h2>"); 
$.ajax({ 
      type: "GET", 
      url: "some_url", 
      data: some_data, 
      dataType: 'jsonp', 
      crossDomain: true, 
      async: false, 
      success: function(response) { 
       $("#sample_container").html("<h2>Sample Libraries</h2>"); 
       html = "<table class='datatable'>"; 
       blah blah 
       } 
       html += "</table>"; 
       $("#sample_container").append(html); 
       $("#sample_container .datatable").dataTable({ "bPaginate": false, 
                  "bAutoWidth": false, 
                  "bFilter": false, 
                  "bInfo": false 
       }).columnFilter({ sPlaceHolder: "head:after", 
            aoColumns: [ { type: "text" }, 
               { type: "text" }, 
               { type: "text" } 
            ] 
       }); 
      }, 

     }); 


{% if sample_app %} 
    <h1>{{ sample_app.id }} - {{ sample_app.name }}</h1> 
    <br/> 
    blah blah... 
{% endif %} 

Answer 1

さらに高速であるだけでなく、サーバー側でDataTableを実装する方がより直接的です。基本的には、テーブル全体をDOMに描画してから、完全に書き換えます。非常に非効率で、数百行以上のデータを扱うことはできません。 "サーバー側" のクエリを介して行わ

のDataTableは、：

$('#marketinghistory').dataTable({  
      "bDestroy":true, 
      "aaSorting": [[ 0, "desc" ]], 
      "bProcessing": true, 
      "bServerSide": true, 
      "sAjaxSource": "url of ajax source", 
      "bJQueryUI": true, 
      "sPaginationType": "full_numbers", 
      "bAutoWidth": false, 
      "bFilter":false, 
      "bLengthChange": true, 
      "bPaginate": true, 
      "bSort": true, 
      "iDisplayLength": 15, 
      "bInfo": true, 
      "aoColumns": [ 
        { "sTitle": "column title", "sWidth": "5%", "sClass":"center" }, 
        { "sTitle": "column title", "sWidth": "25%" , "sClass":"center"}, 
        { "sTitle": "column title", "sWidth": "10%", "sClass":"center" }, 
        { "sTitle": "column title", "sWidth": "5%", "sClass":"center" } 
      ] 
     }); 

は今、フィルタリングのために、あなたはいくつかのオプションを持っています。前もって何をしようとしているのか分かっていれば、それらを「データ」フィールドに変数として渡し、サーバーで並べ替えることができます。しかし、あなたはそれが可変であることを望むかもしれません....その場合、いくつかのフープがあります。

DataTableのコードにこのコードブロックを追加すると、上記のあなたは可変フィルタを行うことができます：

ので、変数はに基づいてフィルタリングするために使用することができページ上の入力フィールドの値に設定されている

"fnServerData": function (sSource, aoData, fnCallback) { 
       var name = $('#namesearch').val(); 
       var phone = $('#phonesearch').val(); 
       var company = $('#companysearch').val(); 

       aoData.push({ "name": "name", "value": name }, 
          { "name": "phone", "value": phone }, 
          { "name": "company", "value": company } 
       ); 

       $.ajax({ 
         "dataType": 'json', 
         "type": "POST", 
         "url": sSource, 
         "data": aoData, 
         "success": fnCallback 
       }); 
      } 

ユーザ入力。 aodata.pushはコールバックにプッシュバックするためのデータを設定し、ajaxコールバックがその作業を行います。このパターンは、左側の検索フィールドと右側のデータテーブルを持つ高度な検索ページで使用します。最初は空白のフィールドに検索フィルターはありませんが、値が入力されてテーブルが再描画されると、サーバーは照会をフィルターにかけることができます。

もちろん、これはクエリを容易にするためにかなり簡単なバックエンド設定を必要とします。 A tut on that is here。