Cant Get Column Filters Working On My DT

Cant Get Column Filters Working On My DT

murday1983murday1983 Posts: 29Questions: 12Answers: 0

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

Replies

  • murday1983murday1983 Posts: 29Questions: 12Answers: 0

    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();
        }
    })
    
  • murday1983murday1983 Posts: 29Questions: 12Answers: 0

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

    searching: false
    
This discussion has been closed.