CODEWITHSUNDEEP
asp.net-coredatatables
n.e
n.e

Reputation: 93

Multi tabs datatable doesn't display data

I have created multi tab datatable in .net core project, but the table doesn't show data. I debugged and return data in controller action and in Ajax success function is ok but it doesn't display in the table and and there are no errors in the console.

can anybody help me?

Thanks so much.

controller:

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

View:

<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>

Upvotes: 1

Views: 341

Answers (1)

LouraQ
LouraQ

Reputation: 6881

There are two errors to cause this issue.

First, the jquery datatable needs the json which field name is data , because you should receive the json in columns by reading data.

Another one, the jquery datatable should get the data of collection instead of one data, although you only have one data to return, you should put it in the list of CategoryViewModel.

Change your GetCategoryById method as follow:

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

Here is the result:

enter image description here

Upvotes: 1

Related Questions