Question

我使用Datatable来显示来自Firebase的数据，首先尝试它可以显示我的数据，我的所有数据。但是当我搜索特定数据时，它会显示No data available in table。我刷新我的页面，它再次显示我的所有数据，但是当我再次搜索时，它会显示相同的结果。我尝试管理会显示多少数据，但它仍会显示相同的结果No data available in table。我使用firebase的json链接作为数据表。为什么会这样？

我使用2种不同的方法，但仍然相同。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/datatables.min.css"/>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <script src="https://www.gstatic.com/firebasejs/4.1.5/firebase.js"></script>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script src="js/config.js"></script>
        <script src="js/jquery-3.2.1.min.js"></script>

        <script>
            $(document).ready(function() {
                $('#example').DataTable({
                    "iDisplayLength": 5,
                    "aLengthMenu": [
                        [5, 10, 25, 50, -1],
                        [5, 10, 25, 50, "All"]]
                });
            });
            $(document).ready(function() {
                $('#example1').DataTable({
                    "iDisplayLength": 5,
                    "aLengthMenu": [
                        [5, 10, 25, 50, -1],
                        [5, 10, 25, 50, "All"]]
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
             <div style="clear: both">
            <h2 style="float: left">Suhu :&nbsp</h2>
            <h2 style="float: left" id="suhu"></h2>
        </div>
        <div style="clear: both">
            <h2 style="float: left">Tanggal :&nbsp</h2>
            <h2 style="float: left" id="tanggal"></h2>
        </div>
        <div style="clear: both">
            <h2 style="float: left">Jam :&nbsp</h2>
            <h2 style="float: left" id="jam"></h2>
        </div>
        </div>
        <!--<div class="container" id="gauge">
        </div>-->
        <div class="container col-md-8">
            <table id="example" class="table table-striped table-bordered dataTable no-footer" cellspacing="0" width="100%" role="grid" style="width: 100%;">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 256px;">Name</th>
                    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 397px;">Position</th>
                    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 197px;">Office</th>
                </tr>
            </thead>
                <tbody id="dea">
                </tbody>
            </table>
        </div>
        <div class="container col-md-8">
            <table id="example1" class="table table-striped table-bordered dataTable no-footer" cellspacing="0" width="100%" role="grid" style="width: 100%;">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 256px;">Name</th>
                    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 397px;">Position</th>
                    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 197px;">Office</th>
                </tr>
            </thead>
                <tbody id="ade">
                </tbody>
            </table>
        </div>
        <script>
            var suhu = document.getElementById('suhu');
            var tanggal = document.getElementById('tanggal');
            var jam = document.getElementById('jam');
            var tabel = document.getElementById('dea');
            var dbref = firebase.database().ref('sensor');
            dbref.limitToLast(1).on('child_added', function(snap){
                var data = snap.val();
                console.log(snap.val());
                suhu.innerHTML = data.temp;
                tanggal.innerHTML = data.date;
                jam.innerHTML = data.time;
            });
            dbref.limitToLast(10).on('child_added', function(snap){
                var data2 = snap.val();
                tabel.innerHTML = "<tr><td>"+data2.temp+"</td><td>"+data2.time+"</td><td>"+data2.date+"</td></tr>"
                console.log(data2);
            });
            $.getJSON('https://skripsifix-69e9a.firebaseio.com/sensor.json?auth=MYp-TOKEN', function (json) {
                $.each(json, function (key, value) {
                    $('#ade').append("<tr><td>"+value.temp+"</td><td>"+value.time+"</td><td>"+value.date+"</td></tr>");     
                });
            });
        </script>
        <script src="js/datatables.min.js"></script>
    </body>
</html>

firebase数据库无法正确显示数据

0 个答案: