How to change states of all checkboxes ( in all pages) when clicked selectAll checkbox jquery datatable

I'm trying to modify a jquery dataTable by adding checkbox column. My table consist of multiple pages. I would like to add a select all checkbox and when I click it, it needs to selects all the checkboxes in all pages. My problem is that, currently it only selects the checkboxes on the current page. Here is my code :

/********************************
TABLE HEAD
********************************/
//get variables/key/node names
var nodes = new Array();
for (binding in result.results.bindings) {
    result.results.bindings[binding].check={'type':'checkStatus','value':'false'};
    var currentNodes = Object.keys(result.results.bindings[binding]);
    nodes = _.union(nodes, currentNodes);
}
var tableHead = "";
//iterate over all nodes, and use them as the tables header
for(var name in nodes) {
        if(nodes[name]==="check"){
            tableHead+='<th> <input type="checkbox" name="selectAll"> </th>';
        }
        else{
          tableHead += "<th>" + nodes[name] + "</th>";
        }
 };
var tableRows = "";
for (var row in result.results.bindings) {

    tableRows += "<tr>";
    //iterate each value

    for (var key in result.results.bindings[row]) {
            if(result.results.bindings[row][key].type==="checkStatus")
            {
                tableRows+='<td> <input type="checkbox" class="singleSelect"> </td>';
            }
            else {
                var value = "x";
                val = result.results.bindings[row][key].value;
                tableRows += "<td>" + value + "</td>";    
                }                   
    }

    tableRows += "</tr>";

};
    $('input[type="checkbox"][name="selectAll"]').click(function(){
        if($(this).prop("checked") == true){
            $(':checkbox').each(function() {
                this.checked = true;
            });
        }
        else if($(this).prop("checked") == false){
            $(':checkbox').each(function() {
                this.checked = false;                        
            });
        }
    });
/*******************************
CREATE RESULTS TABLE
*******************************/
//reset the table
//deleting with api functions not working, so we delete the dom element...

//delete the old results table, if any
$("#results_container").children().detach();
//create unique id
var id = Math.floor( Math.random()*99999 );
//append a new table to the DOM

$("#results_container").append('<table id="result_table' + id + '" cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered"><thead><tr></tr></thead><tbody></tbody></table>');
$("#results_container").append('<input type="button" class="btn" id="calculate_similarity" value="calculate_similarity" style="float:right;"/>');
//append head and body to tabley
$('#results_container table thead tr').append(tableHead);
$('#results_container table tbody').append(tableRows);
$('#results_container table tbody').append(tableRows);



//add the results table
this.resultTable = $('#results_container table').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>"
    , "sPaginationType": "bootstrap"
    , "oLanguage": {
        "sLengthMenu": "_MENU_ records per page"
    }
});
/***********************************************************************************************************************************************
SHOW
************************************************************************************************************************************************/
//remove the loading results spinner
spinner.stop();

$("#results_table").fadeIn(800);
//scroll to the results table
$.scrollTo($("#results_table"), 600);

Here is my html code :

<div id="results_table">

  <h3>Results</h3>
        <div>
        <h5 style="float:left;">Results - Table</h5>
        <button id="download-json" class="btn" style="float:right;"><i class="icon-download"></i> Get JSON</button>
        <button id="download-csv" class="btn" style="float:right;"><i class="icon-download"></i> Get CSV</button>
        </div>
        <br>
        <table id="example" class="display" width="100%"></table>
        <div id="results_container">

        <p>Execute a query first!</p>

        </div>
    </div>

Here is the current situation with my table :