Datatables Not Working With Bootstrap 5 ?

PurpleBirbs · January 2022

Hi today im trying a new project with data tables but data tables button and other thing not applied , any help ?

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>-</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"/>
    </head>

    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">

                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNavDropdown">
                        <ul class="navbar-nav ms-xxl-auto me-xxl-auto">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page">Home</a>
                            </li>
                            <li class="nav-item">   
                                <a class="nav-link" href="?page=news">NAV ITEM 2</a>
                            </li>

                        </ul>
                    </div>
            </div>
        </nav>

        <table id="example" class="table table-striped" style="width:100%">
            <thead>
                <tr>
                    <th>Data 1</th>
                    <th>Data 2</th>
                    
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    
                </tr>

            </tbody>
            <tfoot>
                <tr>
                    <th>Data 1</th>
                    <th>Data 2</th>
                    
                </tr>
            </tfoot>
        </table>




        <script>
            $(document).ready(function () {
                $('#example').DataTable();
            });
        </script>
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
        <script src="assets/js/popper.min.js"></script>
    </body>
</html>

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

kthorngren · January 2022

There doesn't seem to be anything obvious to cause a problem. Do you get errors in the browser's console log?

Can you provide a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

allan · January 2022

Move

        <script>
            $(document).ready(function () {
                $('#example').DataTable();
            });
        </script>

to after you load DataTables and jQuery.

You should be getting an error on the page saying that $ is undefined with the above.

Allan

ryans4595 · January 2022

I have this same issue where I get the error that $ is undefined in the console. I have my Datatables js and jQuery defined in a layout page. I am using Asp.NET Core. The javascript should have loaded before the cshtml view containing my Datatables code. I don't understand why this is a problem.

Here is the script section on the Layout view

<script type="text/javascript" src="~/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="~/js/bootstrap/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/lib/datatables/datatables.min.js"></script>
@RenderSection("Scripts", required: false)

Here are the css files in the Layout head

<link rel="stylesheet" type="text/css" href="~/css/bootstrap/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="~/lib/datatables/datatables.min.css" />
<link rel="stylesheet" href="~/css/site.css" />

Here is my js code in the view

$(document).ready(function () {
        $('#lenderTable').dataTable({
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": true, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            "ajax": {
                "url": "/Admin/GetLenders",
                "type": "POST",
                "datatype": "json"
            },
            "columnDefs": [{
                "targets": [0],
                "visible": false,
                "searchable": false
            }],
            "columns": [
                { "data": "lenderId", "name": "Id", "autoWidth": true },
                { "data": "lenderCode", "name": "Lender Code", "autoWidth": true },
                { "data": "lenderName", "name": "Lender Name", "autoWidth": true },
                { "data": "modifiedOn", "name": "Modified On", "autoWidth": true },
                { "data": "status", "name": "Status", "autoWidth": true },
                {
                    "render": function (data, type, full, meta) { return '<a class="btn btn-info" href="/Admin/Edit/' + full.LenderId + '">Edit</a>'; }
                },
                {
                    data: null,
                    render: function (data, type, row) {
                        return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.LenderId + "'); >Delete</a>";
                    }
                },
            ]

        });
    });

kthorngren · January 2022

@ryans4595 I'm not familiar with Asp.NET Core. Maybe this SO thread will help.

Kevin

ryans4595 · January 2022

Thank you @kthorngren
That did help. Got it working.

Datatables Not Working With Bootstrap 5 ?

Datatables Not Working With Bootstrap 5 ?

Answers

Howdy, Stranger!

Categories

DataTables

Datatables Not Working With Bootstrap 5 ?

Datatables Not Working With Bootstrap 5 ?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables