javascript - firebase database not showing data properly -


i use datatable show data firebase, first try can show data, data. when search specific data, show me no data available in table. refresh page, show data again, when search again, show me same result. try manage how data show, still shows me same result no data available in table. use json link firebase datatable. why happend ?

i use 2 different method, still same.

<!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 sort column descending" style="width: 256px;">name</th>                     <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="position: activate sort column ascending" style="width: 397px;">position</th>                     <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="office: activate 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 sort column descending" style="width: 256px;">name</th>                     <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="position: activate sort column ascending" style="width: 397px;">position</th>                     <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="office: activate 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> 


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -