Как сделать так, чтобы ваш datatable показывал хороший графический интерфейс, а не формат json?

---

Привет Команда

У меня есть рабочий DataTable, но его возвращающий формат Json, я хочу, чтобы он показывал заголовки таблиц и сетку данных.

Что я уже пробовал:

@{
    ViewBag.Title = "People_Lists";
}

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.5.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/dataTables.bootstrap4.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $('#dataTable').DataTable({
            "ajax": {
                "url": "/Home/GeteNtsaDataResults",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                { "data": "LoginID" },
                { "data": "Name" },
                { "data": "SSID" },
                { "data": "Section" },
                { "data": "Role" },
                { "data": "LastActivity" },
                { "data": "TotalActivity" }
            ]
        });
    });
</script>

<div class="container py-4">
    <h4 class="text-center text-uppercase"></h4>
    <div id="dataTable_wrapper"></div>
    <table id="dataTable" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>LoginID</th>
                <th>Name</th>
                <th>SSID</th>
                <th>Section</th>
                <th>Role</th>
                <th>LastActivity</th>
                <th>TotalActivity</th>
            </tr>
        </thead>
    </table>
</div>

---