Datatables Not Working With Bootstrap 5 ?

Datatables Not Working With Bootstrap 5 ?

PurpleBirbsPurpleBirbs Posts: 1Questions: 1Answers: 0
edited January 14 in Free community support

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

Answers

  • kthorngrenkthorngren Posts: 14,650Questions: 25Answers: 3,478

    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

  • allanallan Posts: 55,114Questions: 1Answers: 8,654 Site admin

    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

  • ryans4595ryans4595 Posts: 4Questions: 1Answers: 0

    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>";
                        }
                    },
                ]
    
            });
        });
    
  • kthorngrenkthorngren Posts: 14,650Questions: 25Answers: 3,478

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

    Kevin

  • ryans4595ryans4595 Posts: 4Questions: 1Answers: 0

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

Sign In or Register to comment.