File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!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>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
​
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </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;
}
​
​
div.container {
    min-width: 980px;
    margin: 0 auto;
}
​
​
tr.highlight {
  font-weight: bold;
  color: blue;
}
JavaScriptSaved
 
$(document).ready(function() {
  
var data = [
        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011\/04\/25",
            "office": "Edinburgh",
            "extn": "5421"
        },
        {
            "name": "Garrett Winters",
            "position": "Accountant",
            "salary": "$170,750",
            "start_date": "2011\/07\/25",
            "office": "Tokyo",
            "extn": "8422"
        },
        {
            "name": "Ashton Cox",
            "position": "Junior Technical Author",
            "salary": "$86,000",
            "start_date": "2009\/01\/12",
            "office": "San Francisco",
            "extn": "1562"
        },
        {
            "name": "Ashton Cox",
            "position": "Junior Technical Author",
            "salary": "$86,000",
            "start_date": "2009\/01\/12",
            "office": "San Francisco",
            "extn": "1562"
        },
        {
            "name": "Cedric Kelly",
            "position": "Senior Javascript Developer",
            "salary": "$433,060",
            "start_date": "2012\/03\/29",
            "office": "Edinburgh",
            "extn": "6224"
        },
        {
            "name": "Airi Satou",
            "position": "Accountant",
            "salary": "$162,700",
            "start_date": "2008\/11\/28",
            "office": "Tokyo",
            "extn": "5407"
        },
        {
            "name": "Brielle Williamson",
            "position": "Integration Specialist",
            "salary": "$372,000",
            "start_date": "2012\/12\/02",
            "office": "New York",
            "extn": "4804"
        },
        {
            "name": "Herrod Chandler",
            "position": "Sales Assistant",
            "salary": "$137,500",
            "start_date": "2012\/08\/06",
            "office": "San Francisco",
            "extn": "9608"
        },
        {
            "name": "Rhona Davidson",
            "position": "Integration Specialist",
            "salary": "$327,900",
            "start_date": "2010\/10\/14",
            "office": "Tokyo",
            "extn": "6200"
        },
        {
            "name": "Colleen Hurst",
            "position": "Javascript Developer",
            "salary": "$205,500",
            "start_date": "2009\/09\/15",
            "office": "San Francisco",
            "extn": "2360"
        },
        {
            "name": "Sonya Frost",
            "position": "Software Engineer",
            "salary": "$103,600",
            "start_date": "2008\/12\/13",
            "office": "Edinburgh",
            "extn": "1667"
        },
        {
            "name": "Jena Gaines",
            "position": "Office Manager",
            "salary": "$90,560",
            "start_date": "2008\/12\/19",
            "office": "London",
            "extn": "3814"
        },
        {
            "name": "Quinn Flynn",
            "position": "Support Lead",
            "salary": "$342,000",
            "start_date": "2013\/03\/03",
            "office": "Edinburgh",
            "extn": "9497"
        },
        {
            "name": "Quinn Flynn",
            "position": "Support Lead",
            "salary": "$342,000",
            "start_date": "2013\/03\/03",
            "office": "Edinburgh",
            "extn": "9497"
        }
  ];
​
  
  $('#example').DataTable( {
    //"ajax": "/ajax/objects.txt",
    data: data,
    pageLength: 5,
    "columns": [
      { "data": "name" },
      { "data": "position" },
      { "data": "office" },
      { "data": "extn" },
      { "data": "start_date" },
      { "data": "salary" }
    ],
   initComplete: function () {
     
     var api = this.api();
     
     var names = [];  // Keep track of all names
     var duplicateRows = [];  // Keep track of duplicted rows
     
     // Loop all rows
     api.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
       var data = this.data(); 
       
       if ( names.indexOf( data.name ) > -1 ) {
         duplicateRows.push( this );
       }
       
       names.push( data.name );
     } );     
​
     // Loop all duplicated rows
     duplicateRows.forEach(function (row, index) {
       
       
       // Get the row node
       var node = api.row( row ).node();
       
       $( node ).css({
          "color": "red"
        });  
     })
​
    }                     
  } );
} );
1 error
Line 159: Missing semicolon.
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers