File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
    <head>
        <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
​
        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
​
        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div class="container">
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                      <th>Revision</th>
                      <th>Saved By</th>
                      <th>Timestamp</th>
                      <th>Comment</th>
                    </tr>
                </thead>
​
                <tfoot>
                    <tr>
                      <th>Revision</th>
                      <th>Saved By</th>
                      <th>Timestamp</th>
                      <th>Comment</th>
                    </tr>
                </tfoot>
​
                <tbody>
​
                </tbody>
            </table>
        </div>
    </body>
</html>
CSS
 
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
​
​
div.container {
    min-width: 980px;
    margin: 0 auto;
}
​
tr.highlight td {
  background-color: green;
}
​
tr.focused {
   border:1px solid red; 
  background-color: green;
}
​
JavaScript
 
$(document).ready( function () {
​
   aaData = [["47*", "SCRAADMIN", "May 15, 2014 1:14.10 PM", "Edited 05/15/2014 4:15pm (bogus time)"],
             ["23", null, "NO TS", "NONE"],
             ["22", null, "NO TS", "NONE"],
             ["21", null, "May 10, 2014 3:39.25 PM", "Here is a comment for I...th 2858, version nbr 38"],
             ["20", null, "May 14, 2014 10:06.14 AM", "Here is a comment for I...th 2858, version nbr ??"],
             ["13", "SCRAADMIN", "May 15, 2014 12:45.03 PM", "NONE"],
             ["12", "SCRAADMIN", "May 15, 2014 1:01.42 PM", "/public/footer/bottom"],
             ["11", "SCRAADMIN", "May 15, 2014 1:10.05 PM", "Edited 05/15/2014 1:09pm"],
             ["10", "SCRAADMIN", "May 15, 2014 1:11.13 PM", "Edited 05/15/2014 1:11pm"],
             ["3", "SCRAADMIN", "May 15, 2014 1:11.54 PM", "Edited 05/15/2014 1:13pm"],
             ["2", "SCRAADMIN", "May 15, 2014 1:12.48 PM", "Edited 05/15/2014 2:15pm"],
             ["1", "SCRAADMIN", "May 15, 2014 1:13.33 PM", "Edited 05/15/2014 3:15pm (bogus time)"]];
   
  
  var table = $('#example').DataTable( {
                 "order": [0, 'desc'],
                aoColumns: [
                {"sWidth":"5px"},  //Revision Nbr
                {"sWidth":"25px"},       //Saved By
                {"sWidth":"500px"},  //Timestamp
                {"sWidth":"800px"}  //Comment
            ],
            "aaData": aaData,  //the data for the table
              "columnDefs": [
                { type: 'percent', targets: 0 }
            ],
            "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                if ( aData[0] == "22" )  {                  
                    $('td', nRow).css({"background-color": "#F8E0E6" })
                }
             }
​
    } );
  
  
} );
​
  oTable.find('td').eq(0).addClass('focused');
​
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
            "percent-pre": function ( a ) {
                var x = (a == "-") ? 0 : a.replace( /\*/, "" );
                return parseFloat( x );
            },
​
            "percent-asc": function ( a, b ) {
                return ((a < b) ? -1 : ((a > b) ? 1 : 0));
            },
​
            "percent-desc": function ( a, b ) {
                return ((a < b) ? 1 : ((a > b) ? -1 : 0));
            }
} );
1 error
Line 31: Missing semicolon.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers