File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css"/>
  <script type="text/javascript" src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
<body style="background-color:#192c38 !important;">
  <div class="container" style="padding:50px 100px;">
    <h1>History</h1>
    <br />
    
      <input type="file" id="selectFiles" value="Import" /><br />
      <button id="import">Import</button>
      <textarea id="result">
  
</textarea>
    <table id="mainTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
              <th>Header 3</th>
              <th>Header 4</th>
              <th>Header 5</th>
              <th>Header 6</th>
              <th>Header 7</th>
              <th>View</th>
            </tr>
        </thead>
        
    </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
 
 $(document).ready(function(){
   
    var arrayReturn = [];
            $.ajax({
                url: "original.json",
                dataType: 'json',
                success: function (data) {
                    for (var i = 0, len = data.length; i < len; i++) {
                        var desc = data[i].body;
                        arrayReturn.push([ data[i].nonce, data[i].game, data[i].amount, data[i].payoutMultiplier+'x', data[i].payout, data[i].currency, data[i].updatedAt, '<a href="id='+data[i].id+'&modal" target="_blank">View Bet</a>']);
                    }
                inittable(arrayReturn);
                }
            });
   
    function inittable(data) {  
         console.log(data);
        $('#mainTable').DataTable( {
            "aaData": data,
            "deferRender": true,
                "dataSrc": function ( json ) {
                    console.log(json);
                    for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
                         json.data[i][0] = '<a href="/message/'+json.data[i][0]+'>View message</a>';
                        }
                return json.data;
                }
        } );
    }
​
  });
​
  document.getElementById('import').onclick = function() {
    
    var files = document.getElementById('selectFiles').files;
        console.log(files);
    
    if (files.length <= 0) {
      return false;
  }
    
    var fr = new FileReader();
    
      fr.onload = function(e) {
        console.log(e);
    var result = JSON.parse(e.target.result);
 
    $('#mainTable').DataTable().rows.add( result ).draw();
 
    var formatted = JSON.stringify(result, null, 2);
  
        document.getElementById('result').value = formatted;
  };
    
  fr.readAsText(files.item(0));
};
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers