Multi tab datatable tidak menampilkan data

Question

Saya telah membuat multi tab datatable dalam proyek inti .net, tetapi tabel tidak menampilkan data. Saya men-debug dan mengembalikan data dalam aksi pengontrol dan dalam fungsi sukses Ajax baik-baik saja tetapi tidak ditampilkan di tabel dan dan tidak ada kesalahan di konsol.

ada yang bisa membantu saya

Terima kasih banyak.

pengontrol:

  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();
        }

Melihat:

<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

Ada dua kesalahan yang menyebabkan masalah ini.

Pertama, jquery datatablekebutuhan json yang nama field-nya data, karena Anda harus menerima json columnsdengan membaca data.

Yang lainnya, jquery datatableharus mendapatkan data collection, bukan satu data, meskipun Anda hanya memiliki satu data untuk dikembalikan, Anda harus memasukkannya ke dalam daftar CategoryViewModel .

Ubah GetCategoryByIdmetode Anda sebagai berikut:

   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 });
    }

Inilah hasilnya: