DataTables列過濾器使用固定頭失敗

我有一個DataTables表使用文本輸入單獨列過濾。過濾器工作得很好。但是，當與FixedHeader插件結合使用時，我遇到了問題。當我向下滾動並且標題變得固定時，濾鏡不再起作用。你仍然可以看到他們並輸入他們，他們什麼都不做。不知道它是否有所作爲，但我已將過濾器添加到標題中，以便您可以在表格的頂部看到它們。DataTables列過濾器使用固定頭失敗

我希望我只是想在這裏明顯的東西。如果需要額外的代碼供參考，請告訴我。任何幫助將不勝感激。

數據表腳本

$(document).ready(function() { 

$("#HCView tfoot tr").clone().appendTo($("#HCView thead")).find("th").each(function (i) { 
    var title = $('#HCView thead th').eq($(this).index()).text(); 
    $(this).html('<input type="text" class="HCViewSearch" data-index="'+i+'" />'); 
}); 


// DataTable 
var table = $('#HCView').DataTable({ 
    paging:   false, 
    ordering:  false, 
    scrollX:  false, 
    sScrollX:  false, 
}); 

new $.fn.dataTable.FixedHeader(table, { 
// options 
}); 

// Filter event handler 
$(table.table().container()).on('keyup', 'thead input', function() { 
    table 
     .column($(this).data('index')) 
     .search(this.value) 
     .draw(); 
}); 

$("#HCView_info").appendTo("#tableControls"); 

});

來源

2017-09-03 Aldentec

這是因爲固定報頭元件位於由table().container() API方法所提及的元件的外部。

我會使用在Individual column searching (text inputs)頁面上演示的方法。

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

var table = $('#example').DataTable({ 
    ordering: false, 
    fixedHeader: true 
}); 

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

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

查看this example的代碼和演示。

來源

2017-09-06 15:20:54

爲您提供的「應用搜索」代碼替換掉我的「過濾器事件處理程序」代碼的伎倆！我現在可以使用過濾器，一旦我滾動到他們修復的地步。 – Aldentec

DataTables列過濾器使用固定頭失敗

回答

相關問題