File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
<head>
    
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Michigan Winter Fat Bike Grand Tour</title>
​
<!--<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap.min.css">
​
​
<style type="text/css" class="init">
    
</style>
​
<script type="text/javascript" language="javascript" src="https://datatables.net//media/js/site.js?_=f8b58e9283bed2c11047af0c304e0c6b"></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<!--
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
-->
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap.min.js"></script>
​
​
<script type="text/javascript" class="init">
​
$(document).ready(function() {
    
    $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
        $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
  } );
    
    $('table.display').DataTable( {
        
        "dom": '<"toolbar">frtip',
        
        //"ajax": 'arrays.txt',
        
        "columnDefs": [
            { "visible": false, "targets": 1 }
        ],
        
        initComplete: function () {
            this.api().columns([0]).every( function () {  // columns[0] sets the filter dropdown to only the rider type
            //this.api().columns( [1] ).every( function () {
        var column = this;
        var select = $('<select><option value=""></option></select>').appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
            var val = $.fn.dataTable.util.escapeRegex($(this).val());
 
                        column.search( val ? '^'+val+'$' : '', true, false ).draw();
                    } );
 
          column.data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
         } );
            } );
        }
    
​
    } );
​
} );
​
</script>
​
<style type="text/css">
​
table#example { border: 0px solid #ffcc00; }
table#example td { text-align: center; }
​
h1 { margin: 40px 0; }
.container { width: 60%; margin: auto; }
​
</style>
​
​
</head>
<body>
​
<div class="container">
    <h1>Test</h1>
    
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#tab-table1" data-toggle="tab">Points</a></li>
        <li><a href="#tab-table2" data-toggle="tab">Times</a></li>
    </ul>
​
    <div class="tab-content">
    <div class="tab-pane active" id="tab-table1">       
            <table id="example" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Total</th>
                        <th>Prologue</th>
                        <th>Stage 1</th>
                        <th>Stage 2</th>
                        <th>Stage 3</th>
                    </tr>
                </thead>
        
                <tbody>
                    <tr>
                        <td>Steve Rogers</td>
                        <td>Men Open</td>
                        <td>50</td>
                        <td>25</td>
                        <td>25</td>
                        <td>25</td>
                    </tr>   
                    <tr>
                        <td>Tony Stark</td>
                        <td>Men Open</td>
                        <td>40</td>
                        <td>20</td>
                        <td>20</td>
                        <td>15</td>
                    </tr>   
                    <tr>
                        <td>Natasha Romanov</td>
                        <td>Women Open</td>
                        <td>40</td>
                        <td>20</td>
                        <td>20</td>
                        <td>15</td>
                    </tr>   
                </tbody>
            
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Total</th>
                        <th>Prologue</th>
                        <th>Stage 1</th>
                        <th>Stage 2</th>
                        <th>Stage 3</th>
                    </tr>
                </tfoot>
            </table>
        </div> <!-- end tab-table1 -->
            
        <div class="tab-pane" id="tab-table2">
            <table id="example2" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Total</th>
                        <th>Stage 0</th>
                        <th>Stage 1</th>
                        <th>Stage 2</th>
                        <th>Stage 3</th>
                    </tr>
                </thead>
        
                <tbody>
                    <tr>
                        <td>Steve Rogers</td>
                        <td>Men Open</td>
                        <td>50</td>
                        <td>25</td>
                        <td>25</td>
                        <td>25</td>
                    </tr>   
                    <tr>
                        <td>Tony Stark</td>
                        <td>Men Open</td>
                        <td>40</td>
                        <td>20</td>
                        <td>20</td>
                        <td>15</td>
                    </tr>   
                    <tr>
                        <td>Natasha Romanov</td>
                        <td>Women Open</td>
                        <td>40</td>
                        <td>20</td>
                        <td>20</td>
                        <td>15</td>
                    </tr>   
                </tbody>
            
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Total</th>
                        <th>Prologue</th>
                        <th>Stage 1</th>
                        <th>Stage 2</th>
                        <th>Stage 3</th>
                    </tr>
                </tfoot>
            </table>
        </div> <!-- end tab-table2 -->
    </div> <!-- end .tab-content -->
    
</div> <!-- end .container -->
​
</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;
}
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers