Bootstrap4 DataTable sort and search are not working.

Hello

I am following the instructions https://datatables.net/examples/styling/bootstrap4.html

My table tag is as follows:
**

<

div class="container">

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<!-- DataTables https://cdn.datatables.net/ -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<div>
    <div class="container">
        <div class="row">**

.
.
.

The onload is as follows:

$(document).ready(function () { $('#mytable').DataTable({ paging: false, searching: true, ordering: true, }); });

In the header, I have these tags
<link href="{% static 'custom.css' %}" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href=".{% static "carma.png" %}" type="image/png"/>

<!-- DataTables https://cdn.datatables.net/ -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"/>

The appearance of the table looks fine, but neither the search of the sort functionalities are working. There is no error showing in the Chrome console.

I would appreciate it if someone tells me what else I could be missing.

Thank you