Le schede multiple datatable non visualizzano i dati

Question

Ho creato multi scheda databile nel progetto core .net, ma la tabella non mostra i dati. Ho eseguito il debug e restituito i dati nell'azione del controller e nella funzione di successo Ajax è ok ma non viene visualizzato nella tabella e non ci sono errori nella console.

Qualcuno può aiutarmi?

Grazie mille.

controllore:

  public IActionResult GetCategoryById(int id, int languageId = 0)
        {
            var categoryViewModel = _categoryRepository.GetCategory(id, languageId);
            CategoryViewModel category = new CategoryViewModel()
            {
                 Id = categoryViewModel.Id,
                 Title = categoryViewModel.Title,
                 CaregoryParentId  = categoryViewModel.CaregoryParentId,
                 Priority = categoryViewModel.Priority

            };
            return Json(category);
        }

        [HttpGet]
        public IActionResult Edit(int id)
        {
            ViewData["categoryId"] = id;
            return View();
        }

Visualizza:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="~/css/dataTable/dataTables.bootstrap4.min.css" rel="stylesheet" />


    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="~/js/dataTable/jquery.dataTables.min.js"></script>
    <script src="~/js/dataTable/dataTables.bootstrap.min.js"></script>

    <script>
    $(document).ready(function () { $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust(); }); $('table.table').DataTable({
            ajax:
            {
                "url": "/Admin/Category/GetCategoryById/"+ @ViewData["categoryId"] ,
                "type": "GET",
                "datatype": "json"
            },
            "columns": [

                { "data": "id", "name": "Id", "autoWidth": true },
                { "data": "title", "name": "Title", "autoWidth": true },
                { "data": "caregoryParentId", "name": "CaregoryParentId", "autoWidth": true },
                { "data": "priority", "name": "Priority", "autoWidth": true },

            ],

            scrollY: 200,
            scrollCollapse: true,
            paging: false
        });
        $('#myTable2').DataTable().search('New York').draw();
    });
    </script>

</head>
<body class="dt-example dt-example-bootstrap">
    <div class="container">
        <section>

            <div class="demo-html"></div>
            <div>
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active">
                        <a href="#tab-table1" data-toggle="tab">Table 1</a>
                    </li>
                    <li>
                        <a href="#tab-table2" data-toggle="tab">Table 2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab-table1">
                        <table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Title</th>
                                    <th>CaregoryParentId</th>
                                    <th>Priority</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane" id="tab-table2">
                        <table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Title</th>
                                    <th>CaregoryParentId</th>
                                    <th>Priority</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>

Answer 1

Esistono due errori che causano questo problema.

In primo luogo, è jquery datatablenecessario il json che è il nome del campo data, perché dovresti ricevere il json columnsleggendo data.

Un altro, jquery datatabledovrebbe ottenere i dati della raccolta invece di un dato, sebbene tu abbia solo un dato da restituire, dovresti metterlo nell'elenco di CategoryViewModel .

Cambia il tuo GetCategoryByIdmetodo come segue:

   public IActionResult GetCategoryById(int id, int languageId = 0)
    {
        var categoryViewModel = _categoryRepository.GetCategory(id, languageId);
        CategoryViewModel category = new CategoryViewModel()
        {
             Id = categoryViewModel.Id,
             Title = categoryViewModel.Title,
             CaregoryParentId  = categoryViewModel.CaregoryParentId,
             Priority = categoryViewModel.Priority

        };
        List<CategoryViewModel> categories = new List<CategoryViewModel>();
        categories.Add(category);
        return Json(new { data = categories });
    }

Ecco il risultato: