File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<link href="https://nightly.datatables.net/fixedheader/css/fixedHeader.dataTables.css?_=f0de745b101295e88f1504c17177ff49.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/fixedheader/js/dataTables.fixedHeader.js?_=f0de745b101295e88f1504c17177ff49"></script>
    <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="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Day</th>
            <th>Mon</th>
            <th>Tues</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
          </tr>
          <tr>
            <th>Hour</th>
            <th class="sum">6/1/2018</th>
            <th class="sum">6/2/2018</th>
            <th class="sum">6/3/2018</th>
            <th class="sum">6/4/2018</th>
            <th class="sum">6/5/2018</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th class="dt-head-center">Max</th>
            <th id="amax1" class="max dt-head-center"></th>
            <th id="amax2" class="max dt-head-center"></th>
            <th id="amax3" class="max dt-head-center"></th>
            <th id="amax4" class="max dt-head-center"></th>
            <th id="amax5" class="max dt-head-center"></th>
          </tr>
          <tr>
            <th class="dt-head-center">Min</th>
            <th id="amin1" class="min dt-head-center"></th>
            <th id="amin2" class="min dt-head-center"></th>
            <th id="amin3" class="min dt-head-center"></th>
            <th id="amin4" class="min dt-head-center"></th>
            <th id="amin5" class="min dt-head-center"></th>
          </tr>
          <tr id="totRow">
            <th class="dt-head-center">Total</th>
            <th id="atot1" class="dt-head-center"></th>
            <th id="atot2" class="dt-head-center"></th>
            <th id="atot3" class="dt-head-center"></th>
            <th id="atot4" class="dt-head-center"></th>
            <th id="atot5" class="dt-head-center"></th>
          </tr>
        </tfoot>
​
        <tbody>
          <tr>
            <td>1</td>
            <td>295</td>
            <td>293</td>
            <td>301</td>
            <td>295</td>
            <td>293</td>
          </tr>
          <tr>
            <td>2</td>
            <td>208</td>
            <td>201</td>
            <td>308</td>
            <td>408</td>
            <td>293</td>
          </tr>
           <tr>
            <td>3</td>
            <td>102</td>
            <td>202</td>
            <td>302</td>
            <td>508</td>
            <td>502</td>
          </tr>
           <tr>
            <td>4</td>
            <td>103</td>
            <td>203</td>
            <td>303</td>
            <td>403</td>
            <td>503</td>
          </tr>
          <tr>
            <td>5</td>
            <td>104</td>
            <td>307</td>
            <td>304</td>
            <td>404</td>
            <td>504</td>
          </tr>
          <tr>
            <td>6</td>
            <td>105</td>
            <td>205</td>
            <td>305</td>
            <td>405</td>
            <td>505</td>
          </tr>
          <tr>
            <td>7</td>
            <td>103</td>
            <td>206</td>
            <td>306</td>
            <td>406</td>
            <td>506</td>
          </tr>
          <tr>
            <td>8</td>
            <td>107</td>
            <td>207</td>
            <td>307</td>
            <td>407</td>
            <td>507</td>
          </tr>
          <tr>
            <td>9</td>
            <td>106</td>
            <td>206</td>
            <td>307</td>
            <td>407</td>
            <td>508</td>
          </tr>
          <tr>
            <td>10</td>
            <td>109</td>
            <td>208</td>
            <td>307</td>
            <td>408</td>
            <td>507</td>
          </tr>        
        </tbody>
      </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;
}
​
.max {
    color: red;
}
.min {
    color: blue;
}
.cellmax {
    color: red;
    font-weight: bold;
}
​
.cellmin {
    color: blue;
    font-weight: bold;
}
​
JavaScriptSaved
 
    var actTable = $('#example').DataTable({
        dom: "rt",
        "ordering": false,
        "paging": false,
        fixedHeader: {
            header: true,
            footer: true,
        },
        columnDefs: [
            {
                targets: '_all',
                className: 'dt-center'
            }
        ],
        "footerCallback": function (row, data, start, end, display) {
            var api = this.api();
            nb_cols = api.columns().nodes().length;
            var j = 1;
            while (j < nb_cols) {
                var totVal = api
                    .column(j, { page: 'current' })
                    .data()
                    .reduce(function (a, b) {
                        return Number(a) + Number(b);
                    }, 0);
​
                var maxVal = api
                    .column(j, { page: 'current' })
                    .data()
                    .sort(function (a, b) { return a - b; })
                    .reverse()[0];
​
                var minVal = api
                    .column(j, { page: 'current' })
                    .data()
                    .sort(function (a, b) { return a - b; })[0];
​
                if (typeof maxVal !== "undefined") {      
                    $(api.column(j).cell(":contains(" + maxVal + ")").node()).addClass('cellmax');
                    $(api.column(j).cell(":contains(" + minVal + ")").node()).addClass('cellmin');
​
                    // Update footer
                    $('#amax' + j).html(maxVal);
                    $('#amin' + j).html(minVal);
                    $('#atot' + j).html(totVal);
                }
​
                j++;
            }
        }
    });
​
3 warnings
Line 25: Don't make functions within a loop.
Line 30: Don't make functions within a loop.
Line 36: Don't make functions within a loop.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers