DataTables

DataTables Examples

by Chance Nursey-Bush

HTML

<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css "></script>
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="pricetable">
    <thead>
        <tr>
        <th>Price</th>
        <th>Billable</th>
    </tr>  
    </thead>
    <tbody>
          
    <tr>
        <td>201</td>
        <td>y</td>
    </tr>       
    <tr>
        <td>51</td>
        <td>y</td>
    </tr> 
    <tr>
        <td>7</td>
        <td>n</td>
    </tr>  
        <tr>
        <td>201</td>
        <td>y</td>
    </tr>
        <tr>
        <td>51</td>
        <td>y</td>
    </tr> 
    <tr>
        <td>7</td>
        <td>n</td>
    </tr>
    </tbody>
</table>
            
<br /> <br />  
Total Billable:  <input type='text' id='myBillable' />

<button id='update'>Update Totals</button>

JavaScript

$(document).ready(function() {
    var table = $('#pricetable').DataTable({
        "sPaginationType": "full_numbers", 
        "iDisplayLength": 5
    });   
    
    var billable = 0;
    
    // attempt 1
    /*
    table.rows().eq(1)( function () {
        if(table.data() === 'y'){
           //priceTotal+=parseInt(table.cell(row,0).data());
            alert('This is the billable column, now count which equal "y".')
            billable++;
        }
    });  

    // attempt 2
    //column(2).data() === "y"){
        //alert('This is the billable column, now count which equal "y".')
        //billable++;
    //}
        
    $('#update').click(function(){
        $('#myBillable').val(billable);
    });
    */
   //attempt 3
    var rowCount = table.rows()[0].length;
    for (var row=0;row<rowCount;row++) {
        if (table.cells(row, 1).data().indexOf('y')>-1) {
            billable++;
        }
    }
    alert(billable+' total');
});