Bootstrap4 DataTable sort and search are not working.

markmnei

Hello

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

My table tag is as follows:

**<div class="container">
    <!-- Optional JavaScript TBD -->
    <!-- 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:
    <script>
        $(document).ready(function () {
            $('#mytable').DataTable({
                paging: false,
                searching: true,
                ordering:  true,
            });
        });
    </script>




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

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

kthorngren

There is nothing obvious. But you don't show how you are loading the table. Datatables might not know about the data you are loading. Please let us know the method you are using to populate the table.

Kevin

markmnei

Hello

Thank you for the reply. I am using Django with Jinga2. The table and the data shows up fine. It just whtn I type something obvious (some I know in the table) ... it say **** No matching records found ****. When I click on the column head, no sorting action happens.

The table is relatively large large ... 1803 records. But it does aopload fast and all records are shown on the page.

Please advise if you see something off in my setup.

Thank you again

              <div>
                <table class="display" style="width:100% ; font-size: x-small"
                       id="mytable">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">fld1</th>
                        <th scope="col">fld2</th>
                        <th scope="col">fld3</th>
                        <th scope="col">fld4</th>
.
.
.
                    </tr>
                    </thead>
                    {% for item in merge_df %}
                        <tbody>
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ item.fld1}}</td>
                            <td>{{ item.fld2}}</td>
                            <td>{{ item.fld3}}</td>
                            <td>{{ item.fld4}}</td>
..
..
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>

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

kthorngren

Please use Markdown code formatting so we can see your code correctly.

Is your table built and loaded before you initialize Datatables? If it comes after then Datatables won't know about the data loaded into the table. Please post a link to your page or a test case replicating the problem so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

markmnei

I identified the problem. Adding this:

    var n = document.createElement('script');
    n.setAttribute('language', 'JavaScript');
    n.setAttribute('src', 'https://debug.datatables.net/debug.js');
    document.body.appendChild(n);

helped me figure out where the problem is.