jquery - jquery dataTables columnFilterプラグインが機能しない

原文 jquery ajax jquery-datatables

dataTableは初めてです。フィルター列プラグインを追加すると、sAjaxSourceが呼び出されません。すべてがOKを示しています。 .columnFilter({を無効にしても機能します。
この私のコード:

jQuery('#table1').dataTable({
                "aoColumns":            
                    [
                     { "mDataProp": "icon", "bSortable": false },
                     { "mDataProp": "name" , "bSortable": false},
                     { "mDataProp": "description" , "bSortable": false},
                     { "mDataProp": "charging" , "bSortable": false},
                     { "mDataProp": "download" , "bSortable": false},
                     { "mDataProp": "action" , "bSortable": false}
                 ],
                "bProcessing" : true,
                "bServerSide" : true, 
                "sPaginationType": "full_numbers",
                "bPaginate": true,
                "sAjaxSource" : "application-ajax.html?action=FILTER", 
                "sServerMethod" : "POST",
                "oLanguage" : {
                    "sSearch" : "Filter Apps:",
                    "sLengthMenu" : 'Display <select>'+
                        '<option value="10">10</option>'+
                        '<option value="25">25</option>'+
                        '<option value="50">50</option>'+
                        '<option value="100">100</option>'+
                        '<option value="-1">All</option>'+
                        '</select> records'
                }
}).columnFilter({
                  sPlaceHolder: "head:before",
                  "aoColumns": [
                                 null,
                                 null,
                                 null,
                                 null,
                                 null,
                                 {
                                     type: "select",
                                     values: [ 'ON', 'OFF']
                                 }
                              ]

              });    
答え
「columnFilter」プラグイン[https://code.google.com/p/jquery-datatables-column-filter/]]を使用しているようです。プラグインを正常にロードしていることを確認します。

プラグインなしで手動で列でフィルタリングするには、https://www.datatables.net/manual/apiページから次の例を実行できます。


APIリファレンスドキュメントには、各APIメソッドの例が含まれています。
それが何をするか、何が戻るか、そして
それが受け入れるパラメータ;しかし、説明した概念を形成しましょう
上記のDataTables APIの詳細な行ごとの例に
に使える。この場合、フッターに選択要素を作成します
テーブルの各列のセルには、その列からのデータが含まれています
列であり、テーブルの検索に使用されます。

var table = $('#example').DataTable();  
table.columns().flatten().each( function ( colIdx ) {
  // Create the select list and search operation
  var select = $('<select />')
    .appendTo(
        table.column(colIdx).footer()
    )
    .on( 'change', function () {
        table
            .column( colIdx )
            .search( $(this).val() )
            .draw();
    } );

// Get the search data for the first column and add to the select list
table
    .column( colIdx )
    .cache( 'search' )
    .sort()
    .unique()
    .each( function ( d ) {
        select.append( $('<option value="'+d+'">'+d+'</option>') );
    } ); } );


1行目-コンテキストに単一のテーブルを含むDataTables APIのインスタンスを取得します

3行目-columns()DTメソッドを使用して、テーブル内のすべての列を選択します。 flatten()DTは、columns()DTの2D配列の戻りを列インデックスの1D配列に減らすために使用され、ユーティリティメソッドeach()DTは、選択された各列に対してアクションを実行するために使用されます。

5行目-列のフィルターの選択要素が作成されます

7行目-column()。footer()DTメソッドを使用して、選択入力を挿入するフッターセル要素を取得します。

9行目-jQuery on()メソッドを使用して、select要素の値が変更されたときにアクションを実行します。この場合はテーブルを検索します。

10〜13行目:column()。search()DTを使用して検索をキューに入れ、draw()DTを結果にチェーンしてテーブルの表示を更新します。

17-19行目-DataTablesがcolumn()。cache()DTメソッドを使用してテーブルを検索するために使用する列からデータを取得します。

20〜21行目-ユーティリティメソッドsort()DTおよびunique()DTを使用して、エンドユーザーに提示する必要がある適切に順序付けされたリストにデータを削減します。

22〜24行目-選択リストに検索語句オプションが追加され、使用できるようになりました。

ご覧のとおり、DataTables APIは非常に柔軟性があり、
テーブルにアクセスして操作するための幅広いオプション。
の完全なリストについては、APIリファレンスドキュメントをご覧ください。
利用可能なメソッド。さらに、Editorなどのプラグインは
row()。edit()などのカスタムメソッドでAPIを拡張し、
他のオプションの中でcell()。edit()。
関連記事

javascript - 最初にサーバーで画像を生成する必要がある場合、画像をブラウザーのキャッシュに非同期でプリロードします。

php - PHPを使用して複数のリストボックス値がMySQLデータベースに挿入されない

javascript - ページネーションの「前へ」および「次へ」エラー

php - php mysql jQueryによる連鎖選択

javascript - jqueryでdivを複製し、コードとして表示する

javascript - 新しいブラウザタブでPDFコンテンツを開く

javascript - window.location.replace奇妙な動作

jquery - CSS3トランジションを使用したスクリーンエッジ検出によるホバー時の画像拡大

javascript - 円グラフのアニメーションをビューポート内まで遅らせる

jquery - ズーム可能な領域、ただしズームジェスチャーがない場合はスワイプ