I have a table that uses server-side processing, that displays the data correctly. However, the sort and filtering functions do not work. I'm sure I'm missing something in the javascript code. All my html, javascript and CSS are shown below.

I appreciate any help you could provide.

    <table style="width:100%" id="listing" class="display cell-border">
        <thead>
            <tr>
                <th>Name</th>
                <th>Title</th>
                <th>Department</th>
                <th>Emp ID</th>
            </tr>
        </thead>
    </table>

$(document).ready(function () {
var table = $('#listing').DataTable({
"columns": [
{ "data": "lastfirst" },
{ "data": "title" },
{ "data": "deptname" },
{ "data": "employeecode" }
],
"columnDefs": [
{
"targets": [0],
"visible": true,
"searchable": true
},
{
"targets": [1],
"visible": true,
"searchable": false
},
{
"targets": [2],
"visible": true,
"searchable": false
},
{
"targets": [3],
"visible": false,
"searchable": false
}
],
"order": [[0, "asc" ]],
select: {
style: 'single'
},
"scrollY": "50vh",
"scrollX": false,
"scrollCollapse": true,
"paging": false,
"responsive": true,
"processing": true,
"serverSide": true,
"ajax": "/FormData.aspx?s=bla"
});

// create selected function
$('#listing tbody').on('click', 'tr', function () {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
    window.location = '/FormMain.aspx?f=2';
});

});

div.container {
width: 80%;
}

div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}

div.dataTables_wrapper .dataTables_scroll .dataTables_scrollBody {
overflow-x: hidden !important;
overflow-y: auto !important;
height: 424px;
max-height: 424px;
border: 1px solid #dee2e6;
}

div.dataTables_wrapper .dataTables_scroll .dataTables_scrollHeadInner {
background-color: silver;
}

table.dataTable thead th {
position: relative;
background-image: none !important;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
position: absolute;
top: 12px;
right: 8px;
display: block;
font-family: FontAwesome;
}

table.dataTable thead th.sorting:after {
content: "\f0dc";
color: #ddd;
font-size: 0.8em;
padding-top: 0.12em;
}

table.dataTable thead th.sorting_asc:after {
content: "\f0de";
}

table.dataTable thead th.sorting_desc:after {
content: "\f0dd";
}