Colvis Modal is empty

Colvis Modal is empty

sarooptrivedisarooptrivedi Posts: 45Questions: 15Answers: 2
edited May 2021 in ColVis

I am working with ASP.NET MVC. I tried to add the colvis but the modal is empty
Page code :

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<style>
    div.dataTables_wrapper {
        width: 1080px;
        margin: 0 auto;
    }

    body {
        font: 200 "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
     
        color: #333;
        background-color: #fff;
    }

</style>

<table id="example" class="table table-bordered" style="width:100%;">
    <thead class="thead-dark">
        <tr>
            <th>
                Name
            </th>
            <th>
                Address
            </th>
            <th>
                Town
            </th>
            <th>
                EmployeeNumber
            </th>
            <th>
                DateCreated
            </th>
            <th>
                DateUpdated
            </th>
           
        </tr>
    </thead>
</table>

<link href="~/DataTables/DataTables-1.10.24/css/jquery.dataTables.css" rel="stylesheet" />

<script src="~/DataTables/jQuery-3.3.1/jquery-3.3.1.js"></script>
<script src="~/DataTables/DataTables-1.10.24/js/dataTables.jqueryui.js"></script>
<script src="~/DataTables/DataTables-1.10.24/js/jquery.dataTables.js"></script>

@*Columns Visibility*@
<link href="~/DataTables/Buttons-1.7.0/css/buttons.dataTables.css" rel="stylesheet" />
<script src="~/DataTables/Buttons-1.7.0/js/dataTables.buttons.js"></script>
<script src="~/DataTables/Buttons-1.7.0/js/buttons.colVis.js"></script>
@section scripts{

    <script type="text/javascript">
        $(document).ready(function () {
            $('#example').DataTable({
                "ajax": {
                    "url": "/Company/AjaxHandler",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { data: "Name", "autoWidth": true },
                    { data: "Address", "autoWidth": true },
                    { data: "Town", "autoWidth": true },
                    { data: "EmployeesNumber", "autoWidth": true },
                    { data: "DateCreated", "autoWidth": true },
                    { data: "DateUpdated", "autoWidth": true }
                ],
                "dom": 'Bfrtip',
                "buttons": [

                    {
                        "extend": "colvis",
                        "text": "Show / Hide Columns"
                    },
                    {
                        extend: 'copy',
                        className: 'btn btn-dark rounded-0',
                        text: '<i class="far fa-copy"></i> Copy'
                    },
                    {
                        extend: 'excel',
                        className: 'btn btn-dark rounded-0',
                        text: '<i class="far fa-file-excel"></i> Excel'
                    },
                    {
                        extend: 'pdf',
                        className: 'btn btn-dark rounded-0',
                        text: '<i class="far fa-file-pdf"></i> Pdf'
                    },
                    {
                        extend: 'csv',
                        className: 'btn btn-dark rounded-0',
                        text: '<i class="fas fa-file-csv"></i> CSV'
                    },
                    {
                        extend: 'print',
                        className: 'btn btn-dark rounded-0',
                        text: '<i class="fas fa-print"></i> Print'
                    }
                ]
            });
        });
    </script>
}   
**Layout.cshtml **
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link href="~/DataTables/DataTables-1.10.24/css/jquery.dataTables.css" rel="stylesheet" />
    <link href="~/Content/DataTables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
    <link href="~/Content/DataTables/css/buttons.bootstrap4.min.css" rel="stylesheet" />

    <link href="~/Content/jquery-ui.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")


    <script src="~/DataTables/DataTables-1.10.24/js/jquery.dataTables.js"></script>
    <script src="~/Scripts/jquery-3.5.1.min.js"></script>
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/DataTables/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap4.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>

        <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>


    @*<script src="~/DataTables/Buttons-1.7.0/js/dataTables.buttons.min.js"></script>
    <script src="~/DataTables/Buttons-1.7.0/js/buttons.colVis.min.js"></script>
    <script src="~/DataTables/Buttons-1.7.0/js/buttons.print.js"></script>
    <script src="~/DataTables/Buttons-1.7.0/js/buttons.bootstrap.min.js"></script>
    <script src="~/DataTables/Buttons-1.7.0/js/buttons.html5.js"></script>
    <script src="~/DataTables/JSZip-2.5.0/jszip.min.js"></script>
    <script src="~/DataTables/pdfmake-0.1.36/vfs_fonts.js"></script>
    <script src="~/DataTables/pdfmake-0.1.36/pdfmake.min.js"></script>*@
    @RenderSection("scripts", required: false)
</body>
</html>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • sarooptrivedisarooptrivedi Posts: 45Questions: 15Answers: 2

    Thank you Colin. I am new with Datatable.Net.

    Good thing I figure out my issue,

This discussion has been closed.