troubleshooting Question

MVC: Datatable does not contain any data after publishing

Avatar of jwebster77
jwebster77 asked on
DatabasesJavaScriptHTMLjQuery.NET MVC
1 Comment1 Solution127 ViewsLast Modified:
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.
ASKER CERTIFIED SOLUTION
jwebster77

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros