MVC: Datatable does not contain any data after publishing

Question

Hi,

 

I start by saying this is the first project I have ever published and apologize in advance if I give you too much or too little information.

 

So, I published this mvc project to a business server. It works but the data in the datatable is not showing. Although, when I just debug in visual studio there is data.

 

This project has 2 tabs:

 

The first tab is to show the datatable in question which uses entity framework;

 

The second tab also has a datatable(a yadcf) which shows data that is accessed via ado.Net.

 

Data in the first tab does not show, while it does in the second tab.

 

The datatable on the first tab references to this link:

 

<SCRIPT TYPE="TEXT/JAVASCRIPT" CHARSET="UTF8" SRC="HTTPS://CDN.DATATABLES.NET/1.10.16/JS/JQUERY.DATATABLES.JS"></SCRIPT>

 

While for the second tab I imported the yadcf datatable. Below is how I reference to it:

 

<SCRIPT SRC="~/YADCF/JQUERY.DATATABLES.YADCF.JS"></SCRIPT>

 

Also, when I do f12 under the "Elements" I can see the references to the datatables(see attached photo). Plus it looks like the datatable and its functionalities(search box, paging, column names) show up but without any data in it.

 

In case you want to see it, this is the code of the index page which includes the datatable:

@{
ViewBag.Title = "Index";
}
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#firstTab">View All</a></li>
<li><a data-toggle="tab" href="#secondTab">Add New</a></li>
<li><a data-toggle="tab" href="#thirdTab">Knowledge</a></li>
<li><a data-toggle="tab" href="#fourthTab">IT Tasks</a></li>
</ul>
<div class="tab-content">
<div id="firstTab" class="tab-pane fade in active">@Html.Action("ViewAll")</div>
<div id="secondTab" class="tab-pane fade in">@Html.Action("AddOrEdit")</div>
<div id="thirdTab" class="tab-pane fade in">@Html.Action("ViewAllKnowledge")</div>
<div id="fourthTab" class="tab-pane fade in">@Html.Action("ViewAllTasks")</div>
</div>
@*jQuery Datatable CSS*@
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css">
@section scripts
{
@Scripts.Render("~/bundles/jqueryval")
@*jQuery Datatable JS*@
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
<script>
function activatejQueryTable() {
var table = $('#ticketTable').DataTable({
rowReorder: { selector: 'tr' },
colReorder: true,
"stateSave": true,
"stateDuration": 0,
"autoWidth": false,
"columnDefs": [
{ "width": "40px", "targets": 0, "visible": true },
{ "width": "150px", "targets": 1, "visible": true }, //dtLastUpdated
{ "width": "250px", "targets": 2, "visible": true }, //vcSubject
{ "width": "150px", "targets": 3, "visible": true }, //vcFrom
{ "width": "53px", "targets": 4, "visible": true }, //vcPriority
{ "width": "90px", "targets": 5, "visible": true }, //vcAssignedTo
{ "width": "53px", "targets": 6, "visible": true }, //vcStatus
{ "width": "90px", "targets": 7, "visible": true }, //vcRequestType
{ "width": "90px", "targets": 8, "visible": true }, //vcLocation
{ "width": "90px", "targets": 9, "visible": true }, //vcCategory
{ "width": "90px", "targets": 10, "visible": true }, //dtAnticipatedCompletion
{ "width": "100px", "targets": 11, "visible": true } //edit and delete buttons
],
//Create the dropdowns
responsive: true,
"bAutoWidth": false,
initComplete: function () {
this.api().columns([4, 5, 6, 7, 8, 9]).every(function () {
var column = this;
var select = $('<select class="myDropdown"><option value=""></option></select>')
.appendTo($("#filters").find("th").eq(column.index()))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column.search(val ? '^' + val + '$' : '', true, false).draw();
})
.on('click', function (e) {
e.stopPropagation();
});
column.data().unique().sort().each(function (d, j) {
$(select).append('<option value="' + d + '">' + d + '</option>')
});
});
}
//End of create dropdowns
});
}
//});
$(function () {
activatejQueryTable();
});
</script>
}

FYI, when I published I used the below:

 

UNDER CONNECTION:

Publish method: Web Deploy

Server: (Business Server Name)

Site name: HelpDeskSupport

Username: myUsername

Password: myPassoword

 

UNDER SETTINGS:

Under "DBModel" as the datasource I added the SQL Server name with its username and password.

I checked the "Use this connection string at runtime..."

 

Could you please help me figure out what I have done wrong? Thank you.