Search code examples
javascripthtmlhtml-tabledatatablesstyles

Problem with DataTables - don't work styles and js

I have a problem with the DataTables plugin. Adds code examples that are listed in the Examples tab. I included things like appropriate javascript styles / files via the online options and also added these files locally, but the table doesn't work as it should.

The result of the action is presented below.

Style:

<!-- Style -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">

Table (part):

<div class="col-md-6">      
    <h3 style="margin-top: 10px;">Lista produktow</h3>
    <div class="tabela-produkty">
    <table id="example" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>

Scripts:

<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
</script>

Website screen

Screen here

The table in question and the code taken come from here: https://datatables.net/examples/basic_init/table_sorting.html

Solution

  • please add reference to JQuery and Datatables library

    <!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>About</title>
    <link ref="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
    <table id="grid" class="display" cellspacing="0" style="width:100%">
        <thead>
            <tr>
                <th>Engine</th>
                <th>Browser</th>
                <th>Platform</th>
                <th>Version</th>
            </tr>
        </thead>
    </table>

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var json = {
                result: [
                    { engine: "Trident", browser: "IE 4.0", platform: "Win 95+", version: 4 },
                    { engine: "Trident", browser: "IE 5.0", platform: "Win 95+", version: 5 },
                    { engine: "Trident", browser: "IE 5.5", platform: "Win 95+", version: 5.5 }
                ]
            };

            $('#grid').DataTable({
                data: json.result,
                columns: [
                    { data: "engine" },
                    { data: "browser" },
                    { data: "platform" },
                    { data: "version" }
                ]
            });

        });

    </script>
</body>
</html>