Getting error

Varger

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Link : https://jsfiddle.net/Varger/zoyhu14e/1/

Debugger code

$(document).ready(function() {
    var table = $('#printers').DataTable( {
        dom: 'Bfrtip',
        buttons: ['csv', 'excel', 'pdf', 'print','add'],
        ajax: {
            "processing":true,
            "serverside": true,
            url: '/printerapi/?format=json',
            "dataSrc":"",
            },
            responsive: {
                details: {
                    display: DataTable.Responsive.display.modal({
                        header: function (row) {
                            var data = row.data();
                            return 'Details for ' + data[0] + 'Printer';
                        }
                    }),
                    renderer: DataTable.Responsive.renderer.tableAll({
                        tableClass: 'table'
                    })
                }
            },
            columns: [
                {data:"serial_number"},
                {data:"item_name"},
                {data:"printer_type"},
                {data:"asset_office"},
                {data:"zesa_number"},
                {data:"dateof_purchase"}
                ]
            
    });
});

Error messages shown

jquery.dataTables.js:62 Uncaught ReferenceError: jQuery is not defined
    at jquery.dataTables.js:62:31
    at jquery.dataTables.js:65:1
(anonymous) @ jquery.dataTables.js:62
(anonymous) @ jquery.dataTables.js:65
datatables.min.js:14 jQuery.Deferred exception: Cannot read properties of undefined (reading 'display') TypeError: Cannot read properties of undefined (reading 'display')
    at HTMLDocument.<anonymous> (http://127.0.0.1:8000/printers/:144:51)
    at e (https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-1.13.6/b-2.4.1/b-colvis-2.4.1/b-html5-2.4.1/b-print-2.4.1/datatables.min.js:14:26990)
    at t (https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-1.13.6/b-2.4.1/b-colvis-2.4.1/b-html5-2.4.1/b-print-2.4.1/datatables.min.js:14:27292) undefined
ce.Deferred.exceptionHook @ datatables.min.js:14
t @ datatables.min.js:14
setTimeout (async)
(anonymous) @ datatables.min.js:14
c @ datatables.min.js:14
fireWith @ datatables.min.js:14
fire @ datatables.min.js:14
c @ datatables.min.js:14
fireWith @ datatables.min.js:14
ready @ datatables.min.js:14
P @ datatables.min.js:14
datatables.min.js:14 Uncaught TypeError: Cannot read properties of undefined (reading 'display')
    at HTMLDocument.<anonymous> ((index):144:51)
    at e (datatables.min.js:14:26990)
    at t (datatables.min.js:14:27292)
(anonymous) @ (index):144
e @ datatables.min.js:14
t @ datatables.min.js:14
setTimeout (async)
ce.readyException @ datatables.min.js:14
(anonymous) @ datatables.min.js:14
e @ datatables.min.js:14
t @ datatables.min.js:14
setTimeout (async)
(anonymous) @ datatables.min.js:14
c @ datatables.min.js:14
fireWith @ datatables.min.js:14
fire @ datatables.min.js:14
c @ datatables.min.js:14
fireWith @ datatables.min.js:14
t @ datatables.min.js:14
setTimeout (async)
(anonymous) @ datatables.min.js:14
c @ datatables.min.js:14
fireWith @ datatables.min.js:14
fire @ datatables.min.js:14
c @ datatables.min.js:14
fireWith @ datatables.min.js:14
ready @ datatables.min.js:14
P @ datatables.min.js:14
127.0.0.1/:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

I'm trying to implement modals on my datatable so I'm getting the above errors and I'm failing to view my datatable and show the modal

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

The error is reporting "jQuery is not defined". Have you included the jQuery library? That's a dependency for DataTables.

Colin

allan

I see you provided a Fiddle, so thank you for that! I took a look and made three changes:

1. You were including DataTables and other software from our CDN builder, but also individual files. Including DataTables first, which is why you got the error you were. I removed the individual files.
2. You are using Responsive, so I've added Responsive to the CDN builder url.
3. There was a <script> tag in the JSFiddle Javascript section, which was causing a syntax error.

With those three changes the table renders: https://jsfiddle.net/s360odq4/ . It gives an Ajax error of course, but hopefully it will get you going.

Allan