title: DataTables change checkboxes over all pages
body: <p>I'm using DataTables to list which "events" are shown on each page of my web application.</p>
  
  <p>For each page I have a column and each event is a row with checkboxes per page. (To give you an idea of what it looks like: <a href="http://i.stack.imgur.com/6QhsJ.png" rel="noreferrer">http://i.stack.imgur.com/6QhsJ.png</a>)</p>
  
  <p>When I click on a page it should check all checkboxes, however the checkboxes are only checked on the current page of the DataTable.</p>
  
  <p>Any help is appreciated!</p>
  
  <p><strong>Edit:</strong> here is a JSFiddle for my problem (<a href="https://jsfiddle.net/2n3dyLhh/2/" rel="noreferrer">https://jsfiddle.net/2n3dyLhh/2/</a>)</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;table id="eventsTable" class="table table-striped table-bordered" cellspacing="0" width="100%"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Checkbox&lt;input type="checkbox" id="checkall"/&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Tiger Nixon&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="checkbox1"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Garrett Winters&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="checkbox2"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Ashton Cox&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="checkbox3"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Cedric Kelly&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="checkbox4"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Airi Satou&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="checkbox5"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Brielle Williamson&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="checkbox6"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Herrod Chandler&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="checkbox7"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Rhona Davidson&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="checkbox8"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Colleen Hurst&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="checkbox9"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Sonya Frost&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="checkbox10"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Jena Gaines&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="checkbox11"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Quinn Flynn&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" id="checkbox12"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$(document).ready(function() {
      $.extend($.fn.dataTable.defaults, {
          "columns": [null, { "orderable": false }]
      });
      $('#eventsTable').DataTable();
  });
  
  $("#checkall").on('click', function() {
      if (this.checked) {
          for(var i = 1; i &lt;= 12; i++) {
              var id = "#checkbox" + i;
              $(id).prop('checked', true);
          }
      } else {
          for(var i = 1; i &lt;= 12; i++) {
              var id = "#checkbox" + i;
              $(id).prop('checked', false);
          }
      }
  });
  </code></pre>