File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
  <table id="fidsTable" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Time</th>
            <th>Logo</th>
            <th>Departing from</th>
            <th>Temp</th>
            <th>Flight No</th>
            <th>Status</th>
          </tr>
        </thead>
​
​
​
        <tbody>
        <tr>
        <td width="9%" >10:10</td>
        <td width="13%" class="flightlogo"><img src="../../../../../../airline_logos/fr.gif" alt="." /></td>
        
        <td width="16%">Alicante</td>
        <td><span class="temperature">
          22 &deg;C</td>
        <td width="15%">FR2152</td>
​
        <td width="11%"></td>
        <td width="24%">Boarding</td>
      </tr>
        <tr>
          <td width="9%">10:10</td>
        <td width="9%"><img src="../../../../../../airline_logos/ls.gif" alt="." ></td>
        
        <td width="16%">Lanzarote</td>
               <td>
          23 &deg;C</td>
        <td width="15%">LS1201</td>
​
        <td width="11%"></td>
        <td width="24%">Boarding</td>
      </tr>
                  <tr>
        <td width="9%">10:50</td>
        <td width="13%"><img src="../../../../../../airline_logos/lh.gif" alt="." ></td>
        
        <td width="16%">Frankfurt</td>
               <td >
          5 &deg;C</td>
        <td width="15%">LH953</td>
​
        <td width="11%"></td>
        <td width="24%">Estimated 11:15</td>
      </tr>
                  <tr>
        <td width="9%">11:00</td>
        <td width="13%"><img src="../../../../../../airline_logos/kl.gif" alt="."></td>
        
        <td width="16%">Amsterdam</td>
               <td>
          15 &deg;C</td>
        <td width="15%">KL1424</td>
​
        <td width="11%"></td>
        <td width="24%">Check-In Open</td>
      </tr>
                  <tr>
        <td width="9%">11:00</td>
        <td width="13%"><img src="../../../../../../airline_logos/lh.gif" alt="." ></td>
        
        <td width="16%">Munich</td>
               <td >
          6 &deg;C </td>
        <td width="15%">LH2509</td>
​
        <td width="11%"></td>
        <td width="24%">Estimated 11:15</td>
      </tr>
                  <tr>
        <td width="9%">11:00</td>
        <td width="13%"><img src="../../../../../../airline_logos/ezy.gif" alt="." ></td>
        
        <td width="16%">Belfast</td>
               <td>
          9 &deg;C</td>
        <td width="15%">EZY194</td>
​
        <td width="11%"></td>
        <td width="24%">Check-In Open</td>
      </tr>
                  <tr>
        <td width="9%">11:05</td>
        <td width="13%"><img src="../../../../../../airline_logos/tk.gif" alt="." ></td>
        
        <td width="16%">Istanbul </td>
               <td>
          17 &deg;C </td>
        <td width="15%">TK1968</td>
​
        <td width="11%"></td>
        <td width="24%">Check-In Open</td>
      </tr>
                  <tr>
        <td width="9%">11:05</td>
        <td width="13%"><img src="../../../../../../airline_logos/ezy.gif" alt="." ></td>
        
        <td width="16%">Glasgow</td>
               <td>
          11 &deg;C</td>
        <td width="15%">EZY512</td>
​
        <td width="11%"></td>
        <td width="24%">Check-In Open</td>
      </tr>
                  <tr>
        <td width="9%">11:10</td>
        <td width="13%"><img src="../../../../../../airline_logos/af.gif" alt="."></td>
        
        <td width="16%">Paris CDG</td>
               <td>>
          12 &deg;C </td>
        <td width="15%">AF1165</td>
​
        <td width="11%"></td>
        <td width="24%">Check-In Open</td>
      </tr>
                  <tr>
        <td width="9%">11:25</td>
        <td width="13%"><img src="../../../../../../airline_logos/gr.gif" alt="." ></td>
        
        <td width="16%">Guernsey</td>
               <td>
          14 &deg;C</td>
        <td width="15%">GR703</td>
​
        <td width="11%"></td>
        <td width="24%">On Time</td>
      </tr>
                  <tr>
        <td width="9%">11:30</td>
        <td width="13%"><img src="../../../../../../airline_logos/ls.gif" alt="."></td>
        
        <td width="16%">Funchal</td>
               <td>
          21 &deg;C </td>
        <td width="15%">LS1225</td>
​
        <td width="11%"></td>
        <td width="24%">On Time</td>
      </tr>
                  <tr>
        <td width="9%">11:55</td>
        <td width="13%"><img src="../../../../../../airline_logos/ezy.gif" alt="."></td>
        
        <td width="16%">Edinburgh</td>
               <td>
          11 &deg;C </td>
        <td width="15%">EZY502</td>
​
        <td width="11%"></td>
        <td width="24%">On Time</td>
      </tr>
                 
    </tbody>
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
var degree = '\u2103';
var airlineimage = '../../';
var pageInfo;
var endInt;
var currentInt;
var currentpage;
​
$(document).ready( function () {
 table = $('#fidsTable').DataTable( {   
    createdRow: function(row, data, dataIndex){
      $('td:eq(0)', row).css('padding-left', '15px');
      $('td:eq(1)', row).css('padding-top', '5px','padding-bottom', '5px', 'max-height', '10px' );
      $('td:eq(2)', row).css('color', 'yellow');
      $('td:eq(3)', row).css('color', 'yellow');
      $('td:eq(3)', row).css('margin-left', '-50px');
    },
   ajax: {
      url: 'get_fids.php', 
      dataSrc: '',
   },
   pageLength: 5, 
   responsive: true,
   ordering: false,
   autoWidth: false,
   paging: true,
   searching: false,
   orderable: false,
   info : true, 
   pagingType: "numbers",
   dom: '<"top"i>rt<"clear">',
 
    language: {
      "emptyTable": "There are no flights for <?php echo $date; ?>",
      "info": "Page No: _PAGE_ of _PAGES_",
    },
    columnDefs: [
      {'max-width': '10%', 'targets': 2}
    ],
    columns: [
      { data: "ScheduleTime", width: '10%'},
      { data: "Image", width: '10%', render : function (data, type){
        return '<img class="responsive" src="' + airlineimage + '' + data + '"/>';
        }
      },
      { data: "AirportName",  width: '20%'},
      { data: "Temp",   width: '10%'},
      { data: "Flight",  width: '22%'},
      { data: "RemarksWithTime", width: '27%'},
      ],
    rowCallback: function( row, data ) {
        $('td', row).eq(0).addClass('flightheadertime'); 
        $('td', row).eq(2).addClass('flightdatadepart');
        $('td', row).eq(3).addClass('flightdatastatus'); 
        $('td', row).eq(4).addClass('flightdataflightno');  
        $('td', row).eq(5).addClass('flightdatastatus'); 
        $('td', row).eq(3).addClass('flightdatatemp');
    },
​
      // START OF LOOP
      initComplete: function(settings, json){ 
        pageInfo = table.page.info(),
        endInt = pageInfo.end,
        console.log("INFO", pageInfo);
​
        currentInt = 0,
        interval = setInterval(function(){
            
        table.page( currentInt ).draw( 'page' );
        $("table tr").hide();
        $("table tr").each(function(index){
            $(this).delay(index*100).show(500);
            console.log("PAGE1", pageInfo.page);
        });
        currentInt++;
         console.log("CURRENTINT", currentInt);
         console.log("ENDINT", endInt);
        if ( currentInt ===  endInt)
          currentInt = 0;
          console.log("PAGE2", pageInfo.page);
          console.log("CALL AJAX1");
          //$('#fidsTable tbody').fadeIn(800);
          if ( currentInt == 0) {
              console.log("CALL AJAX2");
            table.ajax.reload();
        }
        }, 12000); 
        
       }
       // END OF LOOP
});
}); 
​
2 errors 1 warning
Line 63: Expected an assignment or function call and instead saw an expression.
Line 82: Use '===' to compare with '0'.
Line 86: Expected an assignment or function call and instead saw an expression.
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers