Multicolumn filter not working when orderCellsTop is used

Multicolumn filter not working when orderCellsTop is used

subratsahanisubratsahani 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();
    });
});

}

Answers

This discussion has been closed.