MVC: Datatable does not contain any data after publishing

Jan 21 2020 9:03 PM
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:
  1. @{  
  2. ViewBag.Title = "Index";  
  3. }  
  4. <ul class="nav nav-tabs">  
  5. <li class="active"><a data-toggle="tab" href="#firstTab">View All</a></li>  
  6. <li><a data-toggle="tab" href="#secondTab">Add New</a></li>  
  7. <li><a data-toggle="tab" href="#thirdTab">Knowledge</a></li>  
  8. <li><a data-toggle="tab" href="#fourthTab">IT Tasks</a></li>  
  9. </ul>  
  10. <div class="tab-content">  
  11. <div id="firstTab" class="tab-pane fade in active">@Html.Action("ViewAll")</div>  
  12. <div id="secondTab" class="tab-pane fade in">@Html.Action("AddOrEdit")</div>  
  13. <div id="thirdTab" class="tab-pane fade in">@Html.Action("ViewAllKnowledge")</div>  
  14. <div id="fourthTab" class="tab-pane fade in">@Html.Action("ViewAllTasks")</div>  
  15. </div>  
  16. @*jQuery Datatable CSS*@  
  17. <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />  
  18. <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">  
  19. <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">  
  20. <link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css">  
  21. @section scripts  
  22. {  
  23. @Scripts.Render("~/bundles/jqueryval")  
  24. @*jQuery Datatable JS*@  
  25. <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>  
  26. <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>  
  27. <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>  
  28. <script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>  
  29. <script>  
  30. function activatejQueryTable() {  
  31. var table = $('#ticketTable').DataTable({  
  32. rowReorder: { selector: 'tr' },  
  33. colReorder: true,  
  34. "stateSave"true,  
  35. "stateDuration": 0,  
  36. "autoWidth"false,  
  37. "columnDefs": [  
  38. "width""40px""targets": 0, "visible"true },  
  39. "width""150px""targets": 1, "visible"true }, //dtLastUpdated  
  40. "width""250px""targets": 2, "visible"true }, //vcSubject  
  41. "width""150px""targets": 3, "visible"true }, //vcFrom  
  42. "width""53px""targets": 4, "visible"true }, //vcPriority  
  43. "width""90px""targets": 5, "visible"true }, //vcAssignedTo  
  44. "width""53px""targets": 6, "visible"true }, //vcStatus  
  45. "width""90px""targets": 7, "visible"true }, //vcRequestType  
  46. "width""90px""targets": 8, "visible"true }, //vcLocation  
  47. "width""90px""targets": 9, "visible"true }, //vcCategory  
  48. "width""90px""targets": 10, "visible"true }, //dtAnticipatedCompletion  
  49. "width""100px""targets": 11, "visible"true } //edit and delete buttons  
  50. ],  
  51. //Create the dropdowns  
  52. responsive: true,  
  53. "bAutoWidth"false,  
  54. initComplete: function () {  
  55. this.api().columns([4, 5, 6, 7, 8, 9]).every(function () {  
  56. var column = this;  
  57. var select = $('<select class="myDropdown"><option value=""></option></select>')  
  58. .appendTo($("#filters").find("th").eq(column.index()))  
  59. .on('change'function () {  
  60. var val = $.fn.dataTable.util.escapeRegex($(this).val());  
  61. column.search(val ? '^' + val + '$' : ''truefalse).draw();  
  62. })  
  63. .on('click'function (e) {  
  64. e.stopPropagation();  
  65. });  
  66. column.data().unique().sort().each(function (d, j) {  
  67. $(select).append('<option value="' + d + '">' + d + '</option>')  
  68. });  
  69. });  
  70. }  
  71. //End of create dropdowns  
  72. });  
  73. }  
  74. //});  
  75. $(function () {  
  76. activatejQueryTable();  
  77. });  
  78. </script>  
  79. }  
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. 

Answers (1)