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" />
<!--<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap.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( {
        
        language: { search: '', searchPlaceholder: "search.." },
        //"dom": 'B<"toolbar">frtip',
        "dom": '<"wrapper"Bf<"toolbar">>rti',
        
        columnDefs: [
            {
                targets: [ 1, 3, 5, 7, 9 ],  // hide time data
                visible: false
            }
        ],
        
        buttons: [
        {
        extend: 'colvisGroup',
        text: 'Points',
        show: [ 2, 4, 6, 8, 10 ],
        hide: [ 3, 5, 7, 9 ]
      },
      {
        extend: 'colvisGroup',
        text: 'Times',
        show: [ 3, 5, 7, 9 ],
        hide: [ 2, 4, 6, 8, 10 ]
            }
        ],
        
        
        //"ajax": 'arrays.txt',
        
                
        // color codes rider class
        "rowCallback": function(row, data, index){
            $(row).find('td:eq(1)').css('color', '#ac1a2f');
            
        if(data[1] == 'Men Open'){
        $(row).find('td:eq(0)').css('color', '#1c3f95');
      }
      if(data[1] == 'Men Sport'){
        $(row).find('td:eq(0)').css('color', '#ac1a2f');
      }
      if(data[1] == 'Women Open'){
        $(row).find('td:eq(0)').css('color', '#4da8da');
        }
      },
        
        // init filter/dropdown for rider class
        initComplete: function () {
            this.api().columns([1]).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 class="form-control input-sm"><option value="">Show All</option></select>').appendTo( $(column.footer()).empty() )
        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>' )
        } );
            } );
        }
    
    } );
    
    //$("div.toolbar").html('<select class="form-control input-sm"><option value="test">Test Cat</option></select>');
​
} );
​
</script>
​
<style type="text/css">
    
.wrapper { float: left; width: 100%; margin-bottom: 20px; }
.toolbar { float: right; text-align: right; margin-right: 10px; }
​
table#example { border: 0px solid #ffcc00; }
table#example td, table#example th { text-align: center; }
table#example th:nth-child(1), table#example td:nth-child(1) { text-align: left; }
​
h1 { margin: 40px 0; }
.container { width: 80%; margin: auto; }
​
.dataTables_wrapper .dataTables_filter input { border: 1px solid #ccc; } /* overwrite the default color so it matches the cat. filter */
​
​
</style>
​
</head>
<body>
​
<div class="container">
    <h1>Test</h1>
    
            <table id="example" class="table table-striped">
                <thead>
                    <tr>
                        <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>Steve Rogers</td>
                        <td>Men Open</td>
                        <td>50</td>
                        <td>22:23</td>
                        <td>25</td>
                        <td>22:23</td>
                        <td>25</td>
                        <td>22:23</td>
                        <td>25</td>
                        <td>22:23</td>
                        <td>15</td>
                    </tr>   
                    <tr>
                        <td>Clint Barton</td>
                        <td>Men Sport</td>
                        <td>40</td>
                        <td>23:22</td>
                        <td>20</td>
                        <td>22:23</td>
                        <td>20</td>
                        <td>22:23</td>
                        <td>15</td>
                        <td>22:23</td>
                        <td>15</td>
                    </tr>   
                    <tr>
                        <td>Natasha Romanov</td>
                        <td>Women Open</td>
                        <td>40</td>
                        <td>28:23</td>
                        <td>20</td>
                        <td>22:23</td>
                        <td>20</td>
                        <td>22:23</td>
                        <td>15</td>
                        <td>22:23</td>
                        <td>15</td>
                    </tr>   
                </tbody>
            
                <tfoot>
                    <tr>
                        <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>
        
    
</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