引导表排序图标丢失

时间：2019-07-19 12:51:44

标签： jquery datatables bootstrap-4

现在我有以下代码：

<!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>

无论我做什么，我都不会在表中得到排序按钮。 我该如何解决？这样我就可以对数据表进行排序。与页面相同。我完成了示例中的所有操作（不在此脚本中），但表未分成多个页面。为什么会这样，为什么这些图标没有与表格一起显示在多个页面上的页码一起显示。

2 个答案:

答案 0 :(得分：0)

以Bootstrap 4为例，在包含bootstrap.css之后，还需要包含以下样式表。

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

您的HTML标记中也有一个错误，您应该包含如下JavaScript脚本：

<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>

您不需要包含jquery-3.3.1.js，因为您早已包含了它。

答案 1 :(得分：0)

由于您未链接到标题中的数据表css文件，因此缺少排序图标。

请在下面运行示例代码：

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>

相关问题
最新问题