DataTables

DataTables Examples

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<table class="dataTable" id="example">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>comma value</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 4,0</td>
            <td>Win 95+</td>
            <td> 4</td>
            <td>X</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5,0</td>
            <td>Win 95+</td>
            <td>5</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5,5</td>
            <td>Win 95+</td>
            <td>5,5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 6</td>
            <td>Win 98+</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td>7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>AOL browser (AOL desktop)</td>
            <td>Win XP</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Firefox 1,0</td>
            <td>Win 98+ / OSX,2+</td>
            <td>1,7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Firefox 1,5</td>
            <td>Win 98+ / OSX,2+</td>
            <td>1,8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
          ...

CSS

.paging_full_numbers a.paginate_button {
    color: #fff !important;
}
.paging_full_numbers a.paginate_active {
    color: #fff !important;
}

JavaScript

var dataTable = $('#example').dataTable({
  fnFooterCallback: function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
      var TotalMarks = 0;
      for ( var i=0 ; i<aaData.length ; i++ ) {
        console.log(TotalMarks, aaData[i][3]);
        TotalMarks = TotalMarks + parseFloat(aaData[i][3].replace(',','.'));
       }
      alert('the result is : '+TotalMarks);
   }
});