Select All checkbox only selects checkboxes that are currently in the page [not in other page indices]

I have a jquery dynatable. Here is the screenshot of my current table

My problem is that when I clicked the select all checkbox, the only checkboxes that are in the first page of the table are selected (in each row) but the others remain unselected. Here is my code so far:

// I have omitted the table head part for the sake of simplicity



   /********************************
    TABLE BODY
    ********************************/
    var tableRows = "";
    //iterate each result object
    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].hasOwnProperty(key) && (resultSetVariables.length==0 || _.contains(resultSetVariables, "?" + key))) {

                    var value = "x";
                    if( result.results.bindings[row][key].value != undefined ) {
                        val = result.results.bindings[row][key].value;
                        if(val.match(regexURL)) {
                            value = '<a href="' + val + '" target="_blank">' + val.substr(val.lastIndexOf('/') + 1) + '</a>';
                        }
                        else
                            value = val;
                    }
                    tableRows += "<td>" + value + "</td>";

            }
        }
        tableRows+='<td><input type="checkbox" class="singleSelect"> </td>';

        tableRows += "</tr>";
    //    console.log(tableRows);
    };
$("#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;"/>');
    $("#results_container").append("<label style='float:right;'><input class='mahoutSelection' id='selectAll' type='checkbox' value='selectAll' style='float:right;'>selectAll</label>");
    //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"
        }
    });
     $('input[id="selectAll"]').on('click', function(){
         if ( $(this).is(':checked') ) {
             $("input[class=singleSelect]").each(function () {
              $(this).prop("checked", true);
          });
         }
         else {
             $("input[class=singleSelect]").each(function () {
              $(this).prop("checked", false);
          });
        }
     });

So how could I fix it so that, when I click the select all, it checks all checkboxes ?