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/buttons/1.6.5/css/buttons.dataTables.min.css" />
​
<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://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" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.colVis.min.js"></script>
​
<script type="text/javascript" class="init">
​
$(document).ready(function() {
      
    //$('#example').DataTable( {
     var t = $('#example').DataTable( {
        
        language: { 
            search: '', searchPlaceholder: "search..",
            zeroRecords: 'No riders found'
        },
        //"dom": 'B<"toolbar">frtip',
        "dom": '<"wrapper"Bf<"toolbar">>rtip',
        
        columnDefs: [
            {
                targets: [ 3, 5, 7, 9, 11 ],  // hide time data
                visible: false,
            },
            
            {
                targets: [0, 1],
                sortable: false,
            },
            
            { targets: 4, // build total points column
                render: function (data, type, row) {
                    return parseInt(row[6]) + parseInt(row[8]) + parseInt(row[10]) + parseInt(row[12]);
                }
            }
        ],
        
        order: [[ 4, 'desc' ]], // sort by total points
        
        buttons: [
        {
        extend: 'colvisGroup',
        text: 'Points',
        show: [ 4, 6, 8, 10, 12 ],
        hide: [ 5, 7, 9, 11 ]
      },
      {
        extend: 'colvisGroup',
        text: 'Times',
        show: [ 5, 7, 9, 11 ],
        hide: [ 4, 6, 8, 10, 12 ]
            }
        ],
                
        
        //"ajax": 'arrays.txt',
        
            
        "rowCallback": function(row, data, index){
            $(row).find('td:eq(3)').css('color', '#ac1a2f'); // sets color for total points
            
            // color codes for classes
        if(data[3] == 'Men Open'){
        $(row).find('td:eq(2)').css('color', '#1c3f95');
      }
      if(data[3] == 'Men Sport'){
        $(row).find('td:eq(2)').css('color', '#038023');
      }
      if(data[3] == 'Women Open'){
        $(row).find('td:eq(2)').css('color', '#4da8da');
        }
      },
        
        // init filter/dropdown for rider class
        initComplete: function () {
            this.api().button(1).enable();
            this.api().button(0).disable();
            
            this.api().columns([3]).every( function () {  // columns[0] sets the filter dropdown to only the rider type
                var column = this;
                var select = $('<select class="form-control input-sm"><option value="">Show All</option></select>').appendTo( ".toolbar" )
                
                .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>' )
        } );
            } );
        }
    } )
    
    .on('buttons-action', function ( e, buttonApi, dataTable, node, config ) {
        
        if ( buttonApi.text() == 'Times' ) {
            buttonApi.button(0).enable();
            buttonApi.button(1).disable()
        }
        else {
            buttonApi.button(1).enable();
            buttonApi.button(0).disable()
        };
    } );;
    
    t.button( 0 )
    .nodes()
    //.css( 'background', 'blue' )
    //.css( 'color', '#ac1a2f' )
    .on( 'click', function ( e ) {
        //console.log( 'Copy button clicked!' );
    } );
    
    
    // setup auto-increment row counter
     t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
    
} );
​
</script>
​
<style type="text/css">
    
.wrapper { float: left; width: 100%; margin-bottom: 20px; }
.toolbar { float: right; text-align: right; margin-right: 10px; }
​
table#example td, table#example th { text-align: center; vertical-align: middle; }
table#example th:nth-child(3), table#example td:nth-child(3) { text-align: left; }
table#example th:nth-child(1), table#example td:nth-child(1) { width: 3%; padding-left: 15px; }
table#example th:nth-child(2), table#example td:nth-child(2) { width: 5%; }
table#schedule td, table#schedule th { text-align: center; vertical-align: middle; }
​
h1 { margin: 40px 0; }
​
.dataTables_wrapper .dataTables_filter input { border: 1px solid #ccc; } /* overwrite the default color so it matches the cat. filter */
img.profile { height: 25px; width: 25px; }
​
button.dt-button, div.dt-button, a.dt-button, input.dt-button { opacity: 1; color: #333; }
button.dt-button.disabled, div.dt-button.disabled, a.dt-button.disabled, input.dt-button.disabled { border: 1px solid #999; color: #ac1a2f; opacity: 1; }
​
.dataTables_wrapper .dataTables_filter input { font-weight: 400; }
​
h1 { margin-bottom: 7px; }
h2 { margin-top: 60px; }
hr { margin-top: 0; }
​
</style>
​
</head>
<body>
​
<div class="container">
    <h1>Test</h1>
    <hr size="1" />
    
            <table id="example" class="table table-striped" style="width: 100%;">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th>Name</th>
                        <th>Class</th>
                        <th>Total</th>
                        <th>Prologue</th>
                        <th>Prologue</th>
                        <th>Stage 1</th>
                        <th>Stage 1</th>
                        <th>Stage 2</th>
                        <th>Stage 2</th>
                        <th>Stage 3</th>
                        <th>Stage 3</th>
                    </tr>
                </thead>
        
                <tbody>
                    <tr>
                        <td></td>
                        <td><img src="https://dgalywyr863hv.cloudfront.net/pictures/athletes/209486/5091830/1/large.jpg" class="profile" alt="" /></td>
                        <td>Steve Rogers</td>
                        <td>Men Open</td>
                        <td><!----></td>
                        <td>22:23</td>
                        <td>25</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>   
                    <tr>
                        <td></td>
                        <td><img src="https://dgalywyr863hv.cloudfront.net/pictures/athletes/3144703/2478678/3/large.jpg" class="profile" alt="" /></td>
                        <td>Clint Barton</td>
                        <td>Men Sport</td>
                        <td></td>
                        <td>21:22</td>
                        <td>25</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><img src="https://dgalywyr863hv.cloudfront.net/pictures/athletes/93110/3030677/5/medium.jpg" class="profile" alt="" /></td>
                        <td>Ben Snyder</td>
                        <td>Men Sport</td>
                        <td></td>
                        <td>24:15</td>
                        <td>20</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><img src="https://dgalywyr863hv.cloudfront.net/pictures/athletes/11244035/13010191/5/large.jpg" class="profile" alt="" /></td>
                        <td>Natasha Romanov</td>
                        <td>Women Open</td>
                        <td></td>
                        <td>28:23</td>
                        <td>25</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>   
                  <tr>
                        <td></td>
                        <td><img src="https://dgalywyr863hv.cloudfront.net/pictures/athletes/11244035/13010191/5/large.jpg" class="profile" alt="" /></td>
                        <td>Natasha Romanov</td>
                        <td>Women Open</td>
                        <td></td>
                        <td>28:23</td>
                        <td>25</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>   
                  <tr>
                        <td></td>
                        <td><img src="https://dgalywyr863hv.cloudfront.net/pictures/athletes/11244035/13010191/5/large.jpg" class="profile" alt="" /></td>
                        <td>Natasha Romanov</td>
                        <td>Women Open</td>
                        <td></td>
                        <td>28:23</td>
                        <td>25</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>   
                  <tr>
                        <td></td>
                        <td><img src="https://dgalywyr863hv.cloudfront.net/pictures/athletes/11244035/13010191/5/large.jpg" class="profile" alt="" /></td>
                        <td>Natasha Romanov</td>
                        <td>Women Open</td>
                        <td></td>
                        <td>28:23</td>
                        <td>25</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>   
                  <tr>
                        <td></td>
                        <td><img src="https://dgalywyr863hv.cloudfront.net/pictures/athletes/11244035/13010191/5/large.jpg" class="profile" alt="" /></td>
                        <td>Natasha Romanov</td>
                        <td>Women Open</td>
                        <td></td>
                        <td>28:23</td>
                        <td>25</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>   
                  <tr>
                        <td></td>
                        <td><img src="https://dgalywyr863hv.cloudfront.net/pictures/athletes/11244035/13010191/5/large.jpg" class="profile" alt="" /></td>
                        <td>Natasha Romanov</td>
                        <td>Women Open</td>
                        <td></td>
                        <td>28:23</td>
                        <td>25</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>   
                  <tr>
                        <td></td>
                        <td><img src="https://dgalywyr863hv.cloudfront.net/pictures/athletes/11244035/13010191/5/large.jpg" class="profile" alt="" /></td>
                        <td>Natasha Romanov</td>
                        <td>Women Open</td>
                        <td></td>
                        <td>28:23</td>
                        <td>25</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>   
                  <tr>
                        <td></td>
                        <td><img src="https://dgalywyr863hv.cloudfront.net/pictures/athletes/11244035/13010191/5/large.jpg" class="profile" alt="" /></td>
                        <td>Natasha Romanov</td>
                        <td>Women Open</td>
                        <td></td>
                        <td>28:23</td>
                        <td>25</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>   
                </tbody>
            
                <tfoot>
                    <tr>
                        <th></th>
                        <th></th>
                        <th>Name</th>
                        <th>Class</th>
                        <th>Total</th>
                        <th>Prologue</th>
                        <th>Prologue</th>
                        <th>Stage 1</th>
                        <th>Stage 1</th>
                        <th>Stage 2</th>
                        <th>Stage 2</th>
                        <th>Stage 3</th>
                        <th>Stage 3</th>
                    </tr>
                </tfoot>
            </table>
            
            <h2>Schedule</h2>
            <hr size="1" />
            
            <table id="schedule" class="table table-striped" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Segment</th>
                        <th>Route</th></td>
                        <th>GPX</th>
                        <th>TCX</th>
                    </tr>
                </thead>
        
                <tbody>
                    <tr>
                        <td>Prologue</td>
                        <td>Bald Mountain / Gravel</td>
                        <td><a href="https://www.strava.com/segments/26637758" target="_blank">view</a></td>
                        <td><a href="https://www.strava.com/routes/2771881370370690082" target="_blank">view</a></td>
                        <td><a href="">download</a></td>
                        <td><a href="">download</a></td>
                    </tr>
                    <tr>
                        <td>Stage 1</td>
                        <td>Orion Oaks Park</td>
                        <td><a href="https://www.strava.com/segments/26596450" target="_blank">view</a></td>
                        <td><a href="https://www.strava.com/routes/2772889600822725298" target="_blank">view</a></td>
                        <td><a href="">download</a></td>
                        <td><a href="">download</a></td>
                    </tr>
                </tbody>
            
                <tfoot>
                    <tr>
                        <th colspan="6"></th>
                    </tr>
                </tfoot>
            </table>
    
</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 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers