File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="first" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Office</th>
            <th>Project</th>
            <th>Hours</th>
          </tr>
        </thead>
      </table>
      
      <table id="second" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Office</th>
            <th>Project</th>
            <th>Hours</th>
          </tr>
        </thead>
      </table>
      
      <table id="third" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Office</th>
            <th>Project</th>
            <th>Hours</th>
          </tr>
        </thead>
      </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;
}
​
JavaScriptSaved
 
$(document).ready(function() {
​
    var allData = [
        ["John Smith", "Florida", "Project A", "8 hrs"],
        ["John Smith", "Florida", "Project B", "12 hrs"],
        ["Jane Doe", "Virginia", "Project A", "10 hrs"]
    ];
​
    $('#first').DataTable({
        data: allData
    })
​
    $('#second').DataTable({
        columnDefs: [{
            targets: [2, 3],
            visible: false
        }],
        data: allData,
        initComplete: function() {
            var names = [];
            var api = this.api();
            var toRemove = [];
​
            api.rows().every(function(rowIdx, tableLoop, rowLoop) {
                var data = this.data();
                if (names[data[0]] === undefined) {
                    // not seen before
                    names[data[0]] = rowIdx;
                } else {
                    toRemove.push(rowIdx);
                }
            })
​
            api.rows(toRemove).remove().draw();
        }
    });
​
    $('#third').DataTable({
        columnDefs: [{
            targets: [0, 1],
            visible: false
        }],
        data: allData,
        initComplete: function() {
            var names = [];
            var sum = [];
            var api = this.api();
            var toRemove = [];
​
            api.rows().every(function(rowIdx, tableLoop, rowLoop) {
                var data = this.data();
                if (names[data[2]] === undefined) {
                    // not seen before
                    names[data[2]] = rowIdx;
                    sum[data[2]] = parseInt(data[3].split(' ')[0]);
                } else {
                    toRemove.push(rowIdx);
                    sum[data[2]] += parseInt(data[3].split(' ')[0]);
                }
            })
​
            api.rows(toRemove).remove().draw();
​
            api.rows().every(function(rowIdx) {
                var data = this.data();
                data[3] = sum[data[2]] + ' hrs';
                this.data(data);
            });
​
            api.draw();
        }
    });
});
3 errors
Line 11: Missing semicolon.
Line 32: Missing semicolon.
Line 60: Missing semicolon.
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers