Javascript Uncaught ReferenceError: createDatatable is not defined

Question

I am trying to create data table in .net core view. However, I am getting error when I check console.

Error like in below.

Uncaught ReferenceError: createDatatable is not defined

I checked If I forgot some cdn to add but I could not find.

I updated all parts of code, I added also controllers.

Javascript code :

@section Scripts{
    <script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
    <script>

            $(document).ready(function () {
                $('#table1').DataTable({tableId:'table1', controller: 'User', action: 'LoadTable',             columns: [
                {
                    data: "Id",
                    name: "eq",
                    visible: true,
                    searchable: true
                },
                {
                    data: "FirstName",
                    name: "co",
                    searchable: true
                },
                {
                    data: "LastName",
                    name: "co",
                    searchable: true
                },
                {
                    data: "UserName",
                    name: "co",
                    searchable: true
                },
                {
                    data: "Email",
                    name: "co",
                    searchable: true
                },
                {
                    sortable: false,
                    class: 'text-center',
                    searchable: false,
                    render: function (data, type, row, meta) {
                        return '<a class="btn btn-outline-success btn-sm" href="/User/ChangePassword/' + row["Id"] + '" title="Şifre Değiştir"><i class="icon-lock"></i></a> &nbsp;&nbsp;&nbsp;<a class="btn btn-outline-primary btn-sm" href="/User/Edit/' + row["Id"] + '" title="Düzenle"><i class="icon-pencil"></i></a> &nbsp;&nbsp;&nbsp;<a class="btn btn-outline-danger btn-sm" href="/User/Delete/' + row["Id"] + '" title="Sil"><i class="icon-trash"></i></a>';
                    }
                }
            ],
            primaryKey: "Id",
            hasCostumActionsColumn: true    
        })
    });
    </script>

Also I am adding controller which I want to go :

        public async Task<IActionResult> LoadTable([FromBody] JqueryDataTablesParameters param)
        {
                param.Columns.Where(a => a.Searchable && a.Search.Value == "DisableSearch").ToList().ForEach((item) => { item.Searchable = false; item.Search.Value = ""; });

                UserListItemDto[] items = null;
                IQueryable<User> query = _userManager.Users.AsNoTracking();

                query = SearchOptionsProcessor<UserListItemDto, User>.Apply(query, param.Columns);
                query = SortOptionsProcessor<UserListItemDto, User>.Apply(query, param);

                var size = await query.CountAsync();

                if (param.Length > 0)
                {
                    items = await query
                        .Skip((param.Start / param.Length) * param.Length)
                        .Take(param.Length)
                        .ProjectTo<UserListItemDto>(_mappingConfiguration)
                        .ToArrayAsync();
                }
                else
                {
                    items = await query
                        .ProjectTo<UserListItemDto>(_mappingConfiguration)
                        .ToArrayAsync();
                }

                return new JsonResult(new JqueryDataTablesResult<UserListItemDto>
                {
                    Data = items,
                    Draw = param.Draw,
                    RecordsFiltered = size,
                    RecordsTotal = size
                });
            }
        } 

Also for Index :

        public IActionResult Index()
        {
            var model = new UserListViewModel();
            return View(model);
        }

Answer 1

We use .DataTable() to create data table .

Below is a demo, you can refer to it.

View:

<table id="example" class="display" width="100%"></table>

@section Scripts{ 
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
    <script>
        var dataSet = [
    ['Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800'],
    ['Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '$170,750'],
    ['Ashton Cox', 'Junior Technical Author', 'San Francisco', '1562', '2009/01/12', '$86,000'],
    ['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '6224', '2012/03/29', '$433,060'],
    ['Airi Satou', 'Accountant', 'Tokyo', '5407', '2008/11/28', '$162,700'],
    ['Brielle Williamson', 'Integration Specialist', 'New York', '4804', '2012/12/02', '$372,000'],
    ['Herrod Chandler', 'Sales Assistant', 'San Francisco', '9608', '2012/08/06', '$137,500'],
    ['Rhona Davidson', 'Integration Specialist', 'Tokyo', '6200', '2010/10/14', '$327,900'],
    ['Colleen Hurst', 'Javascript Developer', 'San Francisco', '2360', '2009/09/15', '$205,500'],
    ['Sonya Frost', 'Software Engineer', 'Edinburgh', '1667', '2008/12/13', '$103,600'],
    ['Jena Gaines', 'Office Manager', 'London', '3814', '2008/12/19', '$90,560'],
    ['Quinn Flynn', 'Support Lead', 'Edinburgh', '9497', '2013/03/03', '$342,000'],
    ['Charde Marshall', 'Regional Director', 'San Francisco', '6741', '2008/10/16', '$470,600'],
    ['Haley Kennedy', 'Senior Marketing Designer', 'London', '3597', '2012/12/18', '$313,500'],
    ['Tatyana Fitzpatrick', 'Regional Director', 'London', '1965', '2010/03/17', '$385,750'],
    ['Michael Silva', 'Marketing Designer', 'London', '1581', '2012/11/27', '$198,500'],
    ['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', '3059', '2010/06/09', '$725,000'],
    ['Gloria Little', 'Systems Administrator', 'New York', '1721', '2009/04/10', '$237,500'],
    ['Bradley Greer', 'Software Engineer', 'London', '2558', '2012/10/13', '$132,000'],
    ['Dai Rios', 'Personnel Lead', 'Edinburgh', '2290', '2012/09/26', '$217,500'],
    ['Jenette Caldwell', 'Development Lead', 'New York', '1937', '2011/09/03', '$345,000'],
    ['Yuri Berry', 'Chief Marketing Officer (CMO)', 'New York', '6154', '2009/06/25', '$675,000'],
    ['Caesar Vance', 'Pre-Sales Support', 'New York', '8330', '2011/12/12', '$106,450'],
    ['Doris Wilder', 'Sales Assistant', 'Sydney', '3023', '2010/09/20', '$85,600'],
    ['Angelica Ramos', 'Chief Executive Officer (CEO)', 'London', '5797', '2009/10/09', '$1,200,000'],
    ['Gavin Joyce', 'Developer', 'Edinburgh', '8822', '2010/12/22', '$92,575'],
    ['Jennifer Chang', 'Regional Director', 'Singapore', '9239', '2010/11/14', '$357,650'],
    ['Brenden Wagner', 'Software Engineer', 'San Francisco', '1314', '2011/06/07', '$206,850'],
    ['Fiona Green', 'Chief Operating Officer (COO)', 'San Francisco', '2947', '2010/03/11', '$850,000'],
    ['Shou Itou', 'Regional Marketing', 'Tokyo', '8899', '2011/08/14', '$163,000'],
    ['Michelle House', 'Integration Specialist', 'Sydney', '2769', '2011/06/02', '$95,400'],
    ['Suki Burks', 'Developer', 'London', '6832', '2009/10/22', '$114,500'],
    ['Prescott Bartlett', 'Technical Author', 'London', '3606', '2011/05/07', '$145,000'],
    ['Gavin Cortez', 'Team Leader', 'San Francisco', '2860', '2008/10/26', '$235,500'],
    ['Martena Mccray', 'Post-Sales support', 'Edinburgh', '8240', '2011/03/09', '$324,050'],
    ['Unity Butler', 'Marketing Designer', 'San Francisco', '5384', '2009/12/09', '$85,675'],
];
 
$(document).ready(function () {
    $('#example').DataTable({
        data: dataSet,
        columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office' },
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' },
        ],
    });
})
    </script>

    }

Result:

Result 2 for update: