title: Why checkbox checked only for the current page I am on
body: <p>I implement table with paging.</p>
  
  <p>Here the code to create table:</p>
  
  <pre><code>&lt;table id="ContactsTable" class="display" cellspacing="0" width="100%"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  @Html.CheckBox("chkBoxAllEmails", new { onclick = "SelectAllEmails(this);" })
              &lt;/th&gt;
              &lt;th&gt;
                  First Name
              &lt;/th&gt;
              &lt;th&gt;
                  Last Name
              &lt;/th&gt;
              &lt;th&gt;
                  Email
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      @foreach (UserContact item in ViewBag.Contacts)
      { 
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;input id = "@(("chkbox" + index++).ToString())"  name="chboxEmail"     type="checkbox"  value = "@item.email" onclick="SelectEmail(this); " /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  @item.firstName
              &lt;/td&gt;
              &lt;td&gt;
                  @item.lastName
              &lt;/td&gt;
              &lt;td&gt;
                  @item.email
              &lt;/td&gt;
          &lt;/tr&gt;
      }
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is the code that create paging in the table:</p>
  
  <pre><code>   &lt;script&gt;
          $(document).ready(function () {
              $('#ContactsTable').dataTable();
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>And here is how this table looks:</p>
  
  <p><img src="https://i.stack.imgur.com/fjEOg.png" alt="enter image description here"></p>
  
  <p>As you can see table contain checkbox column. When I check the header of the checkbox column 
  all the checkbox have to be selected.Here is the JS code that implements it:</p>
  
  <pre><code>    function SelectAllEmails(chboxSelectAllElements) {
  
          var chboxEmailsArray = document.getElementsByName("chboxEmail");        
          if (chboxSelectAllElements.checked) {
  
              for (var i = 0; i &lt; chboxEmailsArray.length; i++) {
                  chboxEmailsArray[i].checked = true;
              }
          }
  
          else {
  
              for (var i = 0; i &lt; chboxEmailsArray.length; i++) {
                  chboxEmailsArray[i].checked = false;
              }
          }
      }
  </code></pre>
  
  <p>And here is how it's looks after I check the header of the checkbox:</p>
  
  <p><img src="https://i.stack.imgur.com/OpZfM.png" alt="enter image description here"></p>
  
  <p>But when I select second page in paging, turn out that the checkboxes not checked:</p>
  
  <p><img src="https://i.stack.imgur.com/bAtLV.png" alt="enter image description here"></p>
  
  <p>i.e checkboxes will only work on current pagination page.</p>
  
  <p>My question is why not all checkboxes selected?
  I need to check or uncheck all checkboxes when the checkbox in the header checked or unchecked , any idea or examples how  can I implement it in my example?</p>
  
  <p>Thank you in advance.    </p>