Multicolumn filter not working when orderCellsTop is used
Multicolumn filter not working when orderCellsTop is used
subratsahani
Posts: 2Questions: 1Answers: 0
$(function() {
$('#roleTable thead tr').clone(true).appendTo( '#roleTable thead' );
$('#roleTable thead tr:eq(1) th').each( function (i) {
//$('#roleTable thead th').each( function () {
var title = $('#roleTable thead th').eq($(this).index()).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
loadRoleTable();
});
function loadRoleTable() {
var table = $("#roleTable").DataTable( {
order: [[ 0, "asc" ]],
orderCellsTop: true,
filter: true,
scrollX:true,
select:true,
lengthMenu: [[10, 20, -1], [10, 20, "All"]],
dom: '<"top"i>rt<"bottom"lp><"clear">',
ajax: {
url: "/example.htm",
type: "GET",
//async: false,
dataSrc: "rows",
error: function (jqXHR, textStatus, errorThrown) {
$(".dataTables_empty").html("<span style='color: red;'>Error Occurred while loading data</span>");
}
},
columns: [
{ data: "code"},
{ data: "Description"}
],
columnDefs: [
{
targets: "_all",
createdCell: function (td, cellData, rowData, row, col) {
$(td).css("text-align", "center");
}
},
{
targets: "_all",
width: 150
}
]
} );
// Apply the search
table.columns().eq(0).each(function(colIdx) {
$('input', table.column(colIdx).header()).on('keyup change', function() {
table
.column(colIdx)
.search(this.value)
.draw();
});
$('input', table.column(colIdx).header()).on('click', function(e) {
e.stopPropagation();
});
});
}
This discussion has been closed.
Answers
Its hard to guess what is happening without a problem description, any errors you are getting or a test case. However with scrollX true you will likely need to set up your column searches differently. See if this example helps:
http://live.datatables.net/cedayopa/1/edit
Kevin
There are no errors as well to put it down here. I tried the example from the link but no luck.
In order to help troubleshoot we will need a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin