Reputation: 147

bootstrap table sort icons missing

Right now I have this code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Inventory</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="ddtf.js"></script>
<script> src="https://code.jquery.com/jquery-3.3.1.js"</script>
<script> src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"</script>
<script> src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"</script>
    <style type="text/css">
        .glyphicon {
    font-size: 20px;
}


table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before 
{
bottom: .5em;
}
        .wrapper{
            width: auto;
            margin: 0 auto;
        }
        .page-header h2{
            margin-top: 0;
        }
        table tr td:last-child a{
            margin-right: 15px;
        }

        .red {
            background-color: #f44336 !important;
        }

        .oranje {
            background-color: #FFC107 !important;
        }
        .test{
            display: inline;
        }

    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();   
        });
    </script>
</head>
<body>
<?php include_once("navbar.html"); ?>
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="page-header clearfix">
                        <h2 class="pull-left">Inventaris</h2>
                        <!-- <a href="create.php" class="btn btn-success pull-right">Voeg product toe</a> -->
                    </div>
                    <?php
                    // Include config file
                    require_once "config.php";
                    // Attempt select query execution
                    $sql = "SELECT * FROM products ORDER BY merk,model";
                    if($result = mysqli_query($link, $sql)){
                        if(mysqli_num_rows($result) > 0){
                            echo "<table id='dtBasicExample' class='table table-bordered table-striped'>";
                                echo "<thead>";
                                    echo "<tr>";
                                        echo "<th>Merk</th>";
                                        echo "<th>Model</th>";
                                        echo "<th>voorraad</th>";
                                        echo "<th>threshold</th>";
                                        echo "<th>Action</th>";
                                    echo "</tr>";
                                echo "</thead>";
                                echo "<tbody>";
                                while($row = mysqli_fetch_array($result)){
                                    $sql2 = "SELECT SUM(aantal) FROM mutaties WHERE product_id = ".$row['id'];
                                    if($result2 = mysqli_query($link, $sql2)){
                                    $row2 = mysqli_fetch_array($result2);
                                        if(empty($row2['SUM(aantal)'])){
                                            $voorraad = "0";
                                        }
                                        else{
                                            $voorraad = $row2['SUM(aantal)'];
                                        }
                                    }
                                    else{
                                        echo "Error";
                                    }

                                    if($voorraad < $row['threshold']) 
                                    {
                                        $sql4 = "SELECT * FROM orders WHERE geleverd = 0 AND product_id =" .$row['id'];
                                        if($result4 = mysqli_query($link,$sql4))
                                        {
                                                if(mysqli_num_rows($result4)>0)
                                                {
                                                    $classNaam = 'oranje';
                                                }
                                                else
                                                {
                                                    $classNaam = 'red';
                                                }
                                        }

                                    }
                                    else
                                    {
                                        $classNaam = '';

                                    }


                                    echo '<tr class="' . $classNaam . '">';
                                        echo "<td>" . $row['merk'] . "</td>";
                                        echo "<td>" . $row['model'] . "</td>";
                                        echo "<td>" . $voorraad . "</td>";
                                        echo "<td>" . $row['threshold'] . "</td>";
                                        echo "<td >";
                                            echo "<a onclick='return window.confirm(\"Weet je zeker dat je ".$row['merk']." ".$row['model']." wilt verwijderen?\")' href='delete.php?id=". $row['id'] ."' title='Delete Record' data-toggle='tooltip'><span class='glyphicon glyphicon-trash' style='color:black'></span></a>";
                                            echo "<a href='uitgaand_order.php?id=". $row['id'] ."' title='Uitgaand' data-toggle='tooltip'><span class='glyphicon glyphicon glyphicon-upload' style='color:black'></span></a>";
                                            echo "<a href='inkomend_order.php?id=". $row['id'] ."' title='Inkomend' data-toggle='tooltip'><span class='glyphicon glyphicon glyphicon-download' style='color:black'></span></a>";
                                            echo "<a href='inkomend_uitgaand_pp.php?id=". $row['id'] . "&in=".TRUE. "&uit=".TRUE."' title='Inkomend/Uitgaand' data-toggle='tooltip'><span class='glyphicon glyphicon glyphicon-sort' style='color:black'></span></a>";
                                            echo "<a href='update_product.php?id=". $row['id'] ."' title='Inkomend' data-toggle='tooltip'><span class='glyphicon glyphicon glyphicon-pencil' style='color:black'></span></a>";
                                            echo "</td>";
                                    echo "</tr>";
                                }
                                echo "</tbody>";                            
                            echo "</table>";
                            // Free result set
                            mysqli_free_result($result);
                        } else{
                            echo "<p class='lead'><em>Er zijn momenteel geen producten</em></p>";
                        }
                    } 
                    else{
                    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
                    }
                    // Close connection
                    mysqli_close($link);
                    ?>
                </div>
            </div>   
            <script>
$(document).ready(function() {
    $('#dtBasicExample').DataTable();
} );
            </script>     
        </div>
    </div>
</body>
</html>

No matter what I try I don't get sorting buttons in my table. How can I solve this? So I can sort my data table. Same with pages. I did everything from the example(not in this script) but the table doesn't divide into multiple pages. Why is that and why are those icons not showing together with the page numbers where the table divides over multiple pages.

Upvotes: 2

Answers (2)

mike85

Reputation: 631

Missing sort icon due you not linked to datatable css file in header.

Please run sample code below:

var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
    [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
    [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
    [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
    [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
    [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
    [ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
    [ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
    [ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
    [ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
    [ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
    [ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
    [ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
    [ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
    [ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
    [ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
    [ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
    [ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
    [ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
    [ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
    [ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
    [ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
    [ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
    [ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
    [ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
    [ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
    [ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
    [ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
    [ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
    [ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
    [ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
    [ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
    [ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
];
 
$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inventory</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
    <table id="example" class="display" width="100%"></table>
</body>
</html>

Upvotes: 0

Gyrocode.com

Reputation: 58880

Based on Bootstrap 4 example, you need to also include the following stylesheet after including bootstrap.css.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">

You also have an error in your HTML markup, you should be including JavaScript scripts as follows:

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

You don't need to include jquery-3.3.1.js since you're already including it earlier.

Upvotes: 1

bootstrap table sort icons missing

Answers (2)

Related Questions