DataTables

DataTables Examples

by KevinGabbert

HTML

<title>Example 1 - apply dataTable()</title>
      
      <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.3/css/jquery.dataTables.css">
      <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.3/css/jquery.dataTables_themeroller.css">

        <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.3/jquery.dataTables.min.js"></script>
      
      
  </head>

      <body id="dt_example">
    <a class="hideMe" style="cursor: pointer; font-size: 20px; color:red; background-color:black;">hide</a>
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example1">
        <thead>
          <tr>
          <th>Name</th>
          <th>Column1</th>
          <th>Column2</th>
          <th>Column3</th>
          <th>%</th>
          <th>Delete</th>
          </tr>
        </thead>
        <tbody id="prec">
            <tr >
            <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
              </tr>
          </tbody>            
        <tfoot>
          <tr id="sum">
            <th>Sum</th>
            <th></th>
            <th></th>
            <th></th>
          </tr>
          <tr id="avg">
            <th>Avg</th>
            <th></th>
            <th></th>
            <th></th>
          </tr>
        </tfoot>
      </table>
    
    <br />
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example2">
      </table>
  </body>

JavaScript

$(document).ready(function() {

    var iTotal = [0, 0, 0];

    var oTable1 = $('#example1').dataTable({
        "table-layout": "fixed",
        "oLanguage": {
            "sZeroRecords": "No data"
        },
        "fnDrawCallback": function(oSettings) {
            iTotal = [0, 0, 0];
            for (var i = 0; i < oSettings.aoData.length; i++) {
                iTotal[0] += oSettings.aoData[i]._aData.c1;
                iTotal[1] += oSettings.aoData[i]._aData.c2;
                iTotal[2] += oSettings.aoData[i]._aData.c3;
            }
            //Sum
            $("#sum").empty();
            $("#sum").append('<th>sum</th><th>'+iTotal[0]+'</th><th>'+iTotal[1]+'</th><th>'+iTotal[2]+'</th>')
            //AVG    
            $("#avg").empty();
            $("#avg").append('<th>avg</th><th>'+iTotal[0]/3+'</th><th>'+iTotal[1]/3+'</th><th>'+iTotal[2]/3+'</th>')    
            
            for (i = 0; i < oSettings.aoData.length; i++) {
                oSettings.aoData[i]._aData.perc = (oSettings.aoData[i]._aData.c1 / iTotal[0] * 100).toFixed(2) + '%';
           // $("#prec").empty();  
            $("#prec").append('<tr><td></td><td></td><td></td><td></td><td>'+oSettings.aoData[i]._aData.perc+'</td><td></td></tr>');
                  }  
                       
        },   
        
        "fnFooterCallback": function(nRow, aaData, iStart, iEnd, aiDisplay) {
        var nCells = nRow.getElementsByTagName('th');
        nCells[1].innerHTML = iTotal[0];

        //check if column[2] is visible??!!how
        //nCells[2].innerHTML=iTotal[1];

        var secondRow = $(nRow).next()[0]; //see this
        var ndCells = secondRow.getElementsByTagName('th');
        ndCells[1].innerHTML = aaData.length > 0 ? (iTotal[0] / aaData.length).toFixed(2) : 0;
         },
        
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": true,
        "bInfo": false,
        "bAutoWidth": false,
        "aaSorting": [[0,...