Cant Get Column Filters Working On My DT

murday1983

I have look at the following page https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html and can not get it working at all.

As far as i can see i have copied the code and replaced the relevant things with my names but can not figure it out at all.

Code

var reportTableCount;

$('#reportDataTable thead tr').clone(true).appendTo('#reportDataTable thead');
$('#reportDataTable thead tr:eq(1) th').each(function (i) {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder="Search ' + title + '" />');

    $('input', this).on('keyup change', function () {
        if ($('#reportDataTable').column(i).search() !== this.value) {
            table
                .column(i)
                .search(this.value)
                .draw();
        }
    });
});

// Transaction report DataTable
var reportTable = $('#reportDataTable')
    .DataTable({
        "orderCellsTop": true,
        "fixedHeader": true,
        "ordering": true, 
        "searching": false,
        "paging": true,
        "info": false, 
        "pagingType": 'simple_numbers',
        "pageLength": 10,
        "dom": '<"top"f>rt<"bottom"lp><"clear">',
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "fnDrawCallback": function () {
            if (reportTableCount < 11) {
                $("div[class='bottom']").hide();
            } else {
                $("div[class='bottom']").show();
            }
        },
        'ajax': {
            "type": 'GET',
            "url": 'js/ReportData.json',                         
            "data": function (data) {
                return data;
            },
            "dataSrc": function (res) {
                reportTableCount = res.data.length;
                return res.data;
            },
            "error": function () {
                $('#reportDataTable_wrapper, #colDescButton').hide();
                $('#reportErrorMessage').show();
            }
        },
        "columns": [
            { "data": "Company" },
            { "data": "Service" },
            { "data": "Groupname" },
            { "data": "Start Date" },
            { "data": "End Date" },
            { "data": "Extension" },
            { "data": "Caller ID" },
            { "data": "Frequency" },
            { "data": "Standard Cost" },
            { "data": "Billed" },
            { "data": "Quantity" },
            { "data": "Storage(GB)" },
            { "data": "InvMonthYear" }
        ],
        "destroy": true
    });

For the

if ($('#reportDataTable').column(i).search() !== this.value) {

i have also tried

if (reportTable.column(i).search() !== this.value) {

but again it doesn't work.

Where am i going wrong as if you compare my code to the sites code its in the correct places

murday1983

No idea how to edit a post but i have now changed my code to try the following and still nothing, why is it not working at all. Did a step by step from Youtue, which is why my doe has changed and it worked on there but this STILL dont, getting annoyed now

$.ajax({
    url: 'js/ReportData.json',
    type: 'get',
    dataType: 'json',
    success: function (data) {
        $('#reportDataTable')
            .DataTable({
                ordering: true,                                       // Allows ordering
                searching: false,                                     // Searchbox
                paging: true,                                         // Pagination
                info: false,                                          // Shows 'Showing X of X' information
                pagingType: 'simple_numbers',                         // Shows 'Previous, Page (up to 5) & Next buttons
                pageLength: 10,                                       // Defaults number of rows to display in table. If changing this value change the show/hide below
                dom: '<"top"f>rt<"bottom"lp><"clear">',               // Positions table elements
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],  // Sets up the amount of records to display
                data: data,
                columns: [                                            // Display JSON data in table
                    { "data": "Company" },
                    { "data": "Service" },
                    { "data": "Groupname" },
                    { "data": "Start Date" },
                    { "data": "End Date" },
                    { "data": "Extension" },
                    { "data": "Caller ID" },
                    { "data": "Frequency" },
                    { "data": "Standard Cost" },
                    { "data": "Billed" },
                    { "data": "Quantity" },
                    { "data": "Storage(GB)" },
                    { "data": "InvMonthYear" }
                ],
                destroy: true
            });

            $('#reportDataTable tfoot th').each(function () {
                 var title = $('#reportDataTable thead th').eq($(this).index()).text();
                 $(this).html('<input type="text" placeholder="Search ' + title + '"/>')
            })

            reportTable.columns().every(function () {
                var dataTableColumn = this;
                $(this.footer()).find('input').on('keyup change', function () {
                    dataTableColumn.search($(this.value)).draw();
                });
            })
    },
    error: function () {
        $('#reportDataTable_wrapper, #colDescButton, #reportDataTable').hide();
        $('#reportErrorMessage').show();
    }
})

murday1983

Figured, it was because i had the following set to false

searching: false