File
Add library
Share
Login or Register
Help
HTML
 
<!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>
    <table width="100%" id="my-data">
          <thead>
              <tr>
                  <th><label>#</label></th>
                  <th><label>DURATION</label></th>          
              </tr>
          </thead>
          <tbody></tbody>
      </table>
  </body>
</html>
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScript
 
var $ = jQuery.noConflict();
​
$(document).ready(function() {  
    
    // data table, landing page stuff
    $('#my-data').get(0).selectedIndex = 0;     
    var datatable = $('#my-data').DataTable({
        "paging":   false,
        "info":     false,
        "order": [[ 0, "asc" ]],
        "autoWidth": false,
      columnDefs: [ {
        targets: 1,
        data: {
          _: '1.display',
          type: '1.@data-order',
          sort: '1.@data-order'
        }
      } ]
    }); 
  
  var myData = [
    {
        duration: 54.72853125
    },
    {
        duration: 61.61146875
    },
    {
        duration: 64.41409375
    },
    {
        duration: 41.855562500000005
    },
    {
        duration: 42.54090625
    },
    {
        duration: 43.4813125
    },
    {
        duration: 44.983843750000005
    },
    {
        duration: 39.61196875
    },
    {
        duration: 35.750625
    },
    {
        duration: 41.06378125
    },
    {
        duration: 45.60453125
    },
    {
        duration: 66.00637499999999
    },
    {
        duration: 50.930343750000006
    },
    {
        duration: 36.6143125
    },
    {
        duration: 55.7326875
    },
    {
        duration: 46.2544375
    },
    {
        duration: 51.5624375
    },
    {
        duration: 34.7882
    }
]; 
​
for(var i=0,length=myData.length; i<length; i++) {
    var html = [],
        guessDuration;
        
    html.push('<tr class="newRow">');
    html.push('<td>'+(i+1)+'</td>');
        
    guessDuration = Math.floor(myData[i].duration);
    if(guessDuration < 60) {
        guessDuration = guessDuration+" sec";
    }
    else {
        guessDuration = Math.floor(guessDuration/60)+":"+(guessDuration%60 < 10 ? "0":"")+guessDuration%60;
    }
    html.push('<td data-sort="'+Math.floor(myData[i].duration)+'" data-order="'+Math.floor(myData[i].duration)+'">~'+guessDuration+'</td>');        
    html.push('</tr>');
    $('#my-data tbody tr:last').after(html.join(''));
}
        
datatable.rows.add($('#my-data tr.newRow')).draw();
$('#my-data tr.newRow').removeClass('newRow');
  
});
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers