データシート<thead>要素のソートとフィルタリング

Question

私は持っているデータの表をソート/フィルタリングするのにDatatablesを使用しています。私は並べ替えとヘッダーの両方をフィルタリングすることができるようにしたいと思いますが、フィルタをクリックするとテーブルのソートが行われ、フィルタの選択が開いたままになりません。

私はここでデモを持っている：http://codepen.io/jasonflaherty/pen/xOdqVVはアイデアのこのタイプの使用：

<thead> 
    <tr> 
     <th><span class="header">Name</span><span class="filter"></span></th> 
     <th><span class="header">Position</span><span class="filter"></span></th> 
     <th><span class="header">Office</span><span class="filter"></span></th> 
     <th><span class="header">Age</span><span class="filter"></span></th> 
     <th><span class="header">Start date</span><span class="filter"></span></th> 
     <th><span class="header">Salary</span><span class="filter"></span></th> 
    </tr> 
    </thead> 

がされています全体番目の要素をオフにクリックしbSortを取ると、それだけでクラス=「ヘッダー」で動作させるための方法を例えば？

Answer 1

.off機能を使用すると、<th>タグからclickイベントを削除できます。次に、新しいイベントハンドラをその要素に追加します。そのイベントハンドラでは、DataTables API columns().order()を呼び出すことができます。あなたのコードの

ベース、これは後に選択するオプションを追加追加：

// your code 
column.data().unique().sort().each(function(d, j) { 
    select.append('<option value="' + d + '">' + d + '</option>') 
}); 

// new code here 
// remove original event handler 
$(column.header()).off('click'); 

// register new event handler 
$(column.header()).on('click', function(e) { 
    // check click target is "<span class='header'>...</span>" or not 
    if (e.target.nodeName !== 'SPAN' || !$(e.target).hasClass('header')) 
    return; 

    // call DataTables API to sort this column and redraw this table 
    column 
    .order($(this).hasClass('sorting_desc') ? 'asc' : 'desc') 
    .draw(); 
}); 

注：あなただけ<select>タグをしたい場合は、ソートイベントをトリガしません。 <select>要素にclickイベントハンドラーを追加して、イベントのバブルを停止することができます。例えば

：

var select = $('<select><option value=""></option></select>') 
    .appendTo($(column.header()).find('span.filter').empty()) 
    .on({ 
    'change': function() { 
     // Do something 
    }, 
    'click': function(e) { 
     // stop click event bubbling 
     e.stopPropagation(); 
    } 
    }); 

希望はこれが便利です。