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>22 &deg;C</td>
        <td width="15%">FR2152</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="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="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="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="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="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="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="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="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="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="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="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 today",
      "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,
        currentInt = 0,
        interval = setInterval(function(){
          table.page( currentInt ).draw( 'page' );
          $("table tr").hide();
          $("table tr").each(function(index){
            $(this).delay(index*100).show(500);
          });
        currentInt++;
        if ( currentInt ===  endInt)
          currentInt = 0;
          if ( currentInt === 0) {
              
            table.ajax.reload();
          }
        }, 12000); 
       }
       // END OF LOOP
});
}); 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers