Data was not populating in thirdparty (https://datatables.net/) datatable. Error - Unload event listeners are deprecated and will be removed

Question

Error - Unload event listeners are deprecated and will be removed

Task is to load data in thirdparty datatable in .net core application. The implementation steps are given in the datatables.net portal, I used the same in the application, but while executing it throws an error "Unload event listeners are deprecated and will be removed" and data is not loading. Need help on this issue.

Below are the code which I used,

Code snippet:

   [HttpGet]
        public IActionResult GetAll()
        {
            List<Product> objProductList =  _unitOfWork.Product.GetAll(includeProperties: "Category").ToList();
            return Json(objProductList);
        }

below is the ajax call:

$(document).ready(function () {
       LoadDataTable();
});

function LoadDataTable() {
    dataTable = $("#tblData").DataTable({
        "ajax": {
            "URL": "/admin/product/getall",
            "type":"get"
        }, 
        "columns": [
            { "data": "title", "width": '15%' },
            { "data": "isbn", "width": '15%' },
            { "data": "listPrice", "width": '15%' },
            { "data": "author", "width": '15%' },
            { "data": "category.name", "width": '15%' }
        ]
    });
}

View:

<table id="tblData" class="table table-bordered table-striped py-2">

When I am trying to run the application, browser shows the attached errors.[enter image description here](https://i.sstatic.net/JpHtB912.jpg)

Answer 1

I found that when the name of the field in columns does not match the expected one, an alert pop-up window will appear.

Here is my working sample, hope it can help you.

Product.cs and Category.cs

namespace DataTableJSProject.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string? Title { get; set; }
        public string? Isbn { get; set; }
        public decimal ListPrice { get; set; }
        public string? Author { get; set; }
        public Category? Category { get; set; }
    }

    public class Category
    {
        public string? Name { get; set; }
    }
}

Data/UnitOfWork.cs (Mock Data)

using DataTableJSProject.Models;

namespace DataTableJSProject.Data
{
    public class UnitOfWork
    {
        public List<Product> Products { get; set; }

        public UnitOfWork()
        {
            Products = new List<Product>
            {
                new Product
                {
                    Id = 1,
                    Title = "Book 1",
                    Isbn = "123456",
                    ListPrice = 29.99M,
                    Author = "Author 1",
                    Category = new Category { Name = "Category 1" } 
                },
                new Product
                {
                    Id = 2,
                    Title = "Book 2",
                    Isbn = "789012",
                    ListPrice = 49.99M,
                    Author = "Author 2",
                    Category = new Category { Name = "Category 2" }
                }
            };
        }

        public IEnumerable<Product> GetAllProducts()
        {
            return Products;
        }
    }
}

ProductController.cs

using DataTableJSProject.Data;
using Microsoft.AspNetCore.Mvc;

namespace DataTableJSProject.Controllers
{
    public class ProductController : Controller
    {
        private readonly UnitOfWork _unitOfWork;

        public ProductController(UnitOfWork unitOfWork)
        {
            _unitOfWork = unitOfWork;
        }

        [HttpGet]
        public IActionResult GetAll()
        {
            var products = _unitOfWork.GetAllProducts();
            return Json(products);
        }

        public IActionResult Index()
        {
            return View();
        }
    }
}

Index.cshtml

@{
    ViewData["Title"] = "Product List";
}

<h1>Product List</h1>

<table id="tblData" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Title</th>
            <th>ISBN</th>
            <th>List Price</th>
            <th>Author</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />

    <script>
        $(document).ready(function () {
            LoadDataTable();
        });

        function LoadDataTable() {
            $('#tblData').DataTable({
                "ajax": {
                    "url": "/Product/GetAll",
                    "type": "GET",
                    "dataSrc": ""
                },
                "columns": [
                    { "data": "title", "width": '15%' },
                    { "data": "isbn", "width": '15%' },
                    { "data": "listPrice", "width": '15%' },
                    { "data": "author", "width": '15%' },
                    { "data": "category.name", "width": '15%' }
                ],
                "language": {
                    "emptyTable": "No data"
                }
               
            });
        }
    </script>
}

Program.cs

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

// Register UnitOfWork
builder.Services.AddSingleton<UnitOfWork>();

var app = builder.Build();

Test Result