Datatable Not Drawing When Applying External Filters

murday1983

No idea whats going on but i have 3 external filters that i want to use to filter my Datatable but i can not get them working at all and can't figure out why or what i'm doing wrong.

Index.html

<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

HTML

<div class="card">
    <div class="card-header">
        Filter results
    </div>
    <div class="card-body">
        <p class="card-text">Use the filters to filter the results.</p>
        <form>
            <div class="row">
                <div class="col-4">
                    <div class="form-group" data-column="2">
                        <label for="companyNameField">Company name</label>
                        <input id="companyNameField" type="text" class="form-control" placeholder="Company name">
                    </div>
                </div>
                <div class="col-2">
                    <div class="form-group" data-column="1">
                        <label for="typeDropdown">Type</label>
                        <select id="typeDropdown" class="form-control">
                            <option id="typeAll">All</option>
                            <option id="typeChan">Channel</option>
                            <option id="typeCust">Customer</option>
                            <option id="typeResell">Reseller</option>
                        </select>
                    </div>
                </div>
                <div class="col-2">
                    <div class="form-group" data-column="8">
                        <label for="accStatusDropdown">Account status</label>
                        <select id="accStatusDropdown" class="form-control">
                            <option id="accStatAll">All</option>
                            <option id="accStatActive">Active</option>
                            <option id="accStatClosed">Closed</option>
                            <option id="accStatSus">Suspended</option>
                            <option id="accStatFraud">Suspended (Fraud)</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <table id="accoutSearchDataTable" class="table table-hover table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Type</th>
                    <th>Name</th>
                    <th>Contact name</th>
                    <th>Tel no.</th>
                    <th>Mobile no.</th>
                    <th>Email address</th>
                    <th>Prefix</th>
                    <th>Account status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

JS File

var accountSearchDataTable = $('#accountSearchDataTable').DataTable({
    "ordering": true, // Allows ordering
    "paging": true, // Pagination
    "searching": false, // Searchbox
    "info": false, // Shows 'Showing X of X' information
    "pagingType": 'simple_numbers', // Shows Previous, page numbers & next buttons only
    "pageLength": 10, // Defaults number of rows to display in table. If changing this value change the show/hide below
    "sDom": '<"wrapper"lfptip>',
    "lengthMenu": [
        [10, 25, 50, -1],
        [10, 25, 50, "All"]
    ],
    "fnDrawCallback": function () {
        $('select[name=accoutSearchDataTable_length]').addClass('form-group, form-control');

        // Shows/Hides dropdown and paginator depending on number of results returned
        if (accoutSearchDataTableCount < 10) {
            $('#accoutSearchDataTable_paginate, #accoutSearchDataTable_length').hide();
        } else {
            $('#accoutSearchDataTable_paginate, #accoutSearchDataTable_length').show();
        }

        if (accoutSearchDataTableCount > 1) {
            $('#noResultsWording').hide();
        }

        // Shows/Hides paginator if only one page displayed
        if ($('#accoutSearchDataTable_next').hasClass('disabled') && $('#accoutSearchDataTable_previous').hasClass('disabled')) {
            $('#accoutSearchDataTable_paginate').hide();
        } else {
            $('#accoutSearchDataTable_paginate').show();
        }
    },
    "language": {
        "lengthMenu":
        "<span class='mb-2' style='display: flex'>" +
        "<span class='mr-2 d-flex align-items-center'>Displaying</span>" +
        "_MENU_" +
        "<span class='ml-2 d-flex align-items-center'>records</span>" +
        "</span>"
    },
    'ajax': {
        "type": 'GET',
        "url": 'js/testFiles/accountSearch.json',
        "data": function (data) {
            return data;
        },
        "dataSrc": function (res) {
            accoutSearchDataTableCount = res.data.length;
            return res.data;
        },
        "error": function () {
            $('#accoutSearchDataTable_wrapper').hide();
            $('#existingRuleLoadErrorMessage').html(
                '<p>There was an issue retrieving data. Please try again.</p>' +
                '<p>If the error keeps occurring, please get in touch.</p>').addClass('text-danger');
        }
    },
    "columns": [
        {
            "data": "id"
        },
        {
            "data": "type"
        },
        {
            "data": "company"
        },
        {
            "data": "contactname"
        },
        {
            "data": "telno"
        },
        {
            "data": "mobileno"
        },
        {
            "data": "emailaddress"
        },
        {
            "data": "prefix"
        },
        {
            "data": "accountstatus"
        },
        {
            "searchable": false, // Stops search in the fields
            "sorting": false, // Stops sorting
            "orderable": false, // Stops ordering
            "data": null,
            "render": function (data) {
                return '<div class="d-flex align-items-center justify-content-center alert alert-info m-0 roundButton">' +
                '<i class="fas fa-eye"></i>' +
                '</div>'
            }
        },
    ],
    "destroy": true
});

$('#typeDropdown').on('change', function () {
    var typeVal = this.value;

    if (typeVal != '') {
        accountSearchDataTable.columns(1).search(typeVal).draw();
    } else {
        alert('typeDropdown ELSE');
    }
})

$('#accStatusDropdown').on('change', function () {
    var statusVal = this.value;

    if (statusVal != '') {
        accountSearchDataTable.columns(8).search(statusVal).draw();
    } else {
        alert('accStatusDropdown ELSE');
    }
})

$('#companyNameField').on('keyup', function () {
    var nameVal = this.value;

    if (nameVal != '') {
        accountSearchDataTable.columns(2).search(nameVal).draw();
    } else {
        alert('companyNameField ELSE');
    }
})

All my alerts are working but the table does not filter.

murday1983

Forgot to add, am i missing a file in my index.html file or something?

As i said there's no errors what so ever it just doesn't filter the dam table. Bee stuck on this now for 4 days now and can't waste any more time on it nor can i find why its not working.

I am also not using a footer before anyone recommends this as is breaks screen layout across the site if i do

tangerine

Your HTML needs to include jQuery.

kthorngren

Your code seems to work in this test case:
http://live.datatables.net/demawike/1/edit

You will need to accommodate the All option by setting the search string to "". I show one option for this in the Status dropdown.

Please provide a link to your page or a test case replicating the issue. Or update my example.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin