We help IT Professionals succeed at work.
Get Started

MVC:  Datatable does not contain any data after publishing

120 Views
Last Modified: 2020-01-21
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>
}

Open in new window

`


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.
Comment
Watch Question
This problem has been solved!
Unlock 1 Answer and 1 Comment.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant

An Experts Exchange subscription includes unlimited access to online courses.

Get Started
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE