2013-07-13 24 views
18

jQuery DataTablesの最新バージョンを使用しています。すべてのテーブルで個別の列フィルタを使用したいので、列フィルタプラグインを使用していますが、フッターでのみ検索ボックスを取得しています。私はヘッダーに配置したいDataTablesカラムフィルタの配置方法

$(document).ready(function() { 
var oTable=$("#example").dataTable({ 
     "bJQueryUI": true, 
     "sScrollX": "100%", 
     "aLengthMenu": [[5, 15, 50, 100], [5, 15, 50, "l00"]], 
     "iDisplayLength": 10, 
     "sPaginationType": "full_numbers", 
     "sDom": '<"top"if>rt<"bottom"lp><"clear">' 

    }).columnFilter({"sPlaceHolder":"head :before", 
    "aoColumns": [{ "type": "text" }, { "type": "text" }, null, null, null, null, { "type": "text" }, null, { "type": "text" }, { "type": "text" }, { "type": "text" }, 

私はテーブルの上にどのように置くことができますか?

答えて

31

方法1(CSS)

あなたはのTD(ないTHsを)としてTHEADにフィルタ行のものを入れて

tfoot { 
    display: table-header-group; 
} 

方法2(Javascriptの)

にCSSを変更することができますし、

$("tfoot input") 

を変更

$("thead input") 
+0

ご返信ありがとうございますが、申し訳ありませんが、第2の方法を取得していません。簡潔に説明できます。 – shan

+0

最も簡単な方法1を使用できます。 http://datatables.net/release-datatables/examples/api/multi_filter.htmlでは、方法2について詳しく説明します。 – asprin

+0

iamはこのcssを使用していますが、動作していません。 – shan

16

あなたは、パラメータを追加することによって、あなたのテーブルの上に 'sPlaceHolder'

}).columnFilter({ 
    sPlaceHolder: "head:after", 
    aoColumns: [ ... 
4

を移動することができ、この

$(document).ready(function() { 
$('#mytable thead td').each(function() { 
     var title = $('#mytable thead th').eq($(this).index()).text(); 
     $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
}); 
$("#mytable thead input").on('keyup change', function() { 
     table 
      .column($(this).parent().index()+':visible') 
      .search(this.value) 
      .draw(); 
}); 
}); 
+0

ありがとう..私の時間を保存しました:) –

6

sPlaceHolderオプションを使用してみてください。

sPlaceHolder: "head:before" 

を例:

dataTable.columnFilter({ 
    sPlaceHolder: "head:before", 
    aoColumns: [ 
     { type: "select" }, 
     { type: "select" },   
     { type: "select" }, 
     { type: "select" }, 
     { type: "select" } 
    ] 
}); 

参照のデモ - >http://jsfiddle.net/JNxj5/

7

は、単純に次のJavaScriptコード(ここでは 'example' というあなたのテーブルのIDであることを)使用:CSSで

$('#example tfoot tr').insertAfter($('#example thead tr'))

4

あなたは使用することができます

display: table-header-group; //on tfoot

display: table-row-group; //on thead

あなたは彼らがこのように配置され得るだろう:

tfoot 
thead 
tbody 
+0

私は上に「thead」、それのすぐ下に「tfoot」、それ以降は行の残りの部分が必要だったことを除いて、関連する問題がありました。 'thead'はすでにHTMLの一番上にあり、その直後に 'tfoot'があるので、 'tfoot'要素の 'display:table-row-group'を正しく設定するとうまくいきました。 ChromeとIE10で正しく表示されるようになりました。 – EdwinW

1
CSS: 
tfoot input { 
    width: 100%; 
    padding: 3px; 
    box-sizing: border-box; 
} 
tfoot { 
display: table-header-group;} 

Script: 
$(document).ready(function() { 
// Setup - add a text input to each footer cell 
$('#example tfoot th').each(function() { 
    var title = $(this).text(); 
    $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
}); 

// DataTable 
var table = $('#example').DataTable(); 

// Apply the search 
table.columns().every(function() { 
    var that = this; 

    $('input', this.footer()).on('keyup change', function() { 
     if (that.search() !== this.value) { 
      that 
       .search(this.value) 
       .draw(); 
     } 
    }); 
}); 

});

+0

答えがOPの問題を解決する方法を説明し、コードが何をしているのか説明してください。コードのみの回答はお勧めできません。ありがとう! –

関連する問題