Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src=" http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  <link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> 
<meta charset=utf-8 />
<title>JS Bin</title>
  <style type="text/css">
    .customCSS-Trident, table.dataTable tr.even td.customCSS-Trident.sorting_1, table.dataTable tr.odd td.customCSS-Trident.sorting_1 { background-color: blue; color: #fff; }
    .customCSS-Fish, table.dataTable tr.even td.customCSS-Fish.sorting_1, table.dataTable tr.odd td.customCSS-Fish.sorting_1 { background-color: green; color: #fff; }
    .customCSS-Pony, table.dataTable tr.even td.customCSS-Pony.sorting_1, table.dataTable tr.odd td.customCSS-Pony.sorting_1 { background-color: brown; color: yellow; }
    .customCSS-Cabbage, table.dataTable tr.even td.customCSS-Cabbage.sorting_1, table.dataTable tr.odd td.customCSS-Cabbage.sorting_1 { background-color: pink; }
  </style>
  </head>
<body>
 
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        <thead>
          <tr>
            <th>#</th>
            <th>Engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
  </table>
  
  
<script>
var aDataSet = [
    ['1', 'Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['2', 'Fish','Internet Explorer 5.0','Win 95+','5','C'],
    ['3', 'Pony','Internet Explorer 5.5','Win 95+','5.5','A'],
  ['4', 'Cabbage','Internet Explorer 6.0','Win 2000','6.0','A']
];  
  
   // Use as a function to create a link from the data source
   $(document).ready( function() {
     var oTable = $('#example').dataTable( {
       "aaData": aDataSet,
       "aoColumnDefs": [ 
         {  "aTargets": [ 0 ], 
            "sTitle": "#" 
         },
         {  "aTargets": [ 1 ], 
            "sTitle": "Engine" 
         },
        { "aTargets": [ 2 ], 
           "sTitle": "Browser" 
        },
        { "aTargets": [ 3 ], 
         "sTitle": "Platform" 
        },
         { "aTargets": [ 4 ],
          "sTitle": "Version"
        },      
        { "aTargets": [ 5 ], 
          "sTitle": "Grade", 
          "sClass": "center" 
         }
       ], 
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
          $('td:eq(4)', nRow).addClass("customCSS-" + aData[1]);    
            return nRow;
        },
     });
   } );
  </script>  
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers