Как отобразить вложенную строку, относящуюся друг к другу, в jquery, доступном для работы с ядром asp.net MVC?

Question

Я создаю новостной сайт в админ-панели, нам нужно показать категорию и подкатегорию в Jquery Datatable.Конечно, я реализовал выборку категории и подкатегории из Datatable, но у меня есть проблема с тем, как отобразить категорию и подкатегорию в jquery Datatable.Я нашел ссылку на дочерние строки в jquery Datatable, но я ее не понял.

У меня есть эта ошибка:

Предупреждение DataTables: идентификатор таблицы = table_id- Запрошен неизвестный параметр '0' для строки 0, столбца 0. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/4

https://datatables.net/examples/api/row_details.html

  public static class CategoryExtension
    {
        public static IList<CategoryDto> BuildTrees(this IList<Category> categories)
        {
            var dtos = categories.Select(c => new CategoryDto
            {
                CategoryId = c.CategoryId,
                CategoryName = c.CategoryName,
                ParentId = c.ParentCategoryId
            }).ToList();

            return BuildTrees(null, dtos);
        }

        private static IList<CategoryDto> BuildTrees(int? pid,IList<CategoryDto> candicates)
        {
            var subs = candicates.Where(c => c.ParentId == pid).ToList();
            if(subs.Count() == 0)
            {
                return new List<CategoryDto>();
            }
            foreach (var item in subs)
            {
                item.Subs = BuildTrees(item.CategoryId, candicates);
            }
            return subs;
        }
    }

    public async Task<IActionResult> GetCategories()
    {

        var categories = await _newsContex.Categories.ToListAsync();
        var subs = categories.BuildTrees();           
        return Json(subs);
    }

---

<link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    <script src="~/js/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap.min.js"></script>

   <table class="table table-striped table-bordered table-hover" id="table_id">
<thead>
<tr>
    <th>
        عنوان دسته
    </th>

    <th class="text-center">عملیات</th>
</tr>
</thead>

</table>

---

<script>

    function format(d) {
        // `d` is the original data object for the row
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
            '<tr>' +
            '<td>Full name:</td>' +
            '<td>' + d.CategoryName + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>Extension number:</td>' +
            '<td>' + 'Hello' + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>Extra info:</td>' +
            '<td>And any further details here (images etc)...</td>' +
            '</tr>' +
            '</table>';
    }

    $(document).ready(function () {
        var table = $('#table_id').DataTable({
            "ajax": {
                url: "/Admin/Category/GetCategories",
                type: 'get',
                contentType:'application/json',
                dataSrc: ""
            },


            "order": [[0, 'asc']]
        });

        // Add event listener for opening and closing details
        $('#table_id tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });
    });

</script>