Datatable.Net - Search by columns is not rendering - asp.net-core

Question

I'm using jQuery datatable.net to render a table (server-side). Everything including filtering is working fine. I elected to implement searching by column and I just can't seem to get it to render the values. When I type in a value, the "Processing" window displays and immediately goes away (which tells me that the search string is being processed) however the search results are not being displayed.
My datatable script is as follows:
#section scripts {
<script type="text/javascript">
$(document).ready(function () {
$('#contacts tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
var contactlist = $('#contacts').DataTable({
responsive: true,
destroy: true,
orderMulti: true,
processing: true,
serverSide: true,
stateSave: true,
stateSaveCallback: function (settings, data) {
localStorage.setItem('DataTables_' + settings.sInstance, JSON.stringify(data))
},
stateLoadCallback: function (settings) {
return JSON.parse(localStorage.getItem('DataTables_' + settings.sInstance))
},
oLanguage: {
sSearch: ""
},
pagingType: "full_numbers",
filter: true,
rowId: "id",
order: [[1, "asc"]],
ajax: {
url: "/Contact/GetContactList",
type: "POST",
datatype: "json"
},
columnDefs: [{
targets: [0],
visible: false,
searchable: false
}],
"columns": [
{ data: "id", name: "Id", autoWidth: true},
{ data: "firstName", name: "FirstName", autoWidth: true },
{ data: "lastName", name: "LastName", autoWidth: true },
{ data: "company", name: "Company", autoWidth: true },
{
data: null,
name: "Phone",
autoWidth: true,
defaultContent: "",
render: function (data, type, row) {
var cell = "";
var office = "";
var other = "";
if (row.phoneCell != null) {
cell = "<i class='fas fa-mobile-alt'></i><a href='tel:" + row.phoneCell + "'> " + "<small>" + row.phoneCell + "</small></a>";
}
if (row.phoneOffice != null) {
if (cell != "") { office = "<br />"; }
office = office + "<i class='fas fa-building'></i><a href='tel:" + row.phoneOffice + "'> " + "<small>" + row.phoneOffice + "</small></a>";
}
if (row.phoneOther != null) {
if (office != "") { other = "<br />"; }
other = other + "<i class='fas fa-phone-square-alt'></i><a href='tel:" + row.phoneOther + "'> " + "<small>" + row.phoneOther + "</small></a>";
}
return cell + office + other;
}
},
{
data: "webSite",
name: "WebSite",
autoWidth: true,
defaultContent: "",
render: function (data, type, row) {
if (row.webSite != null) {
return "<i class='fas fa-globe-americas'></i><a href='" + row.webSite + "' target='_blank'> " + "<small>" + row.webSite + "</small></a>";
}
}
},
{ data: "campaign", name: "Campaign", autoWidth: true, defaultContent: "" },
],
initComplete: function () {
var r = $('#contacts tfoot tr');
r.find('th').each(function () {
$(this).css('padding', 8);
});
$('#contacts thead').append(r);
$('#search_0').css('text-align', 'center');
var api = this.api();
api.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that.search(this.value);
that.draw();
}
});
});
}
});
$('.dataTables_filter input[type="search"]').
attr('placeholder', 'Filter by first/last name or company ...').
css({ 'width': '350px', 'display': 'inline-block' });
$('#contacts tbody').on('click', 'tr', function () {
debugger;
var currentRowData = contactlist.row(this).data();
var id = currentRowData.id;
var url = "#Url.Action("View", "Contact")?id=" + id;
window.open(url,"_parent");
});
});
</script>
Any idea what I'm doing wrong?
Thanks.
-- Val