Restrict check/uncheck all to current page
<p>I have a select all checkbox that controls the checkboxes in table that is paginated in to subsequent pages. This works well except that it selects all records. For example, if a table has 200 records with a per page view of 20, I expect 10 pages in total. However, when the select all is checked, then it selects all 200 records and not just 20 of the current page. The expected result should be 20. I have researched broadly but not found an answer yet. </p>

<p>Here is a recreated problem 
html </p>

<pre><code>    &lt;table id='Table'&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;
          &lt;input type="checkbox" name="ticAll" id="ticAll"&gt; &lt;/th&gt;
        &lt;th&gt;name&lt;/th&gt;
        &lt;th&gt;Age&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody id='pagCont'&gt;
      &lt;tr&gt;
        &lt;td&gt;
        &lt;input type="checkbox" name="records[]" id="records" value="1"&gt;
        &lt;/td&gt;
        &lt;td&gt;Tom&lt;/td&gt;
        &lt;td&gt;22&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="2"&gt;
        &lt;/td&gt;
        &lt;td&gt;Harry&lt;/td&gt;
        &lt;td&gt;24&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="3"&gt;
        &lt;/td&gt;
        &lt;td&gt;Diva&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="4"&gt;
        &lt;/td&gt;
        &lt;td&gt;Charlotte&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="5"&gt;
        &lt;/td&gt;
        &lt;td&gt;Danny&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
         &lt;input type="checkbox" name="records[]" id="records" value="6"&gt;
        &lt;/td&gt;
        &lt;td&gt;Romeo&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="7"&gt;
        &lt;/td&gt;
        &lt;td&gt;Gladys&lt;/td&gt;
        &lt;td&gt;21&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="8"&gt;
        &lt;/td&gt;
        &lt;td&gt;Troy&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="9"&gt;
        &lt;/td&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="1"&gt;
        &lt;/td&gt;
        &lt;td&gt;Fabio&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="10"&gt;
        &lt;/td&gt;
        &lt;td&gt;Gracia&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="11"&gt;
        &lt;/td&gt;
        &lt;td&gt;Tamuda&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="12"&gt;
        &lt;/td&gt;
        &lt;td&gt;Elliot&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="13"&gt;
        &lt;/td&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="14"&gt;
        &lt;/td&gt;
        &lt;td&gt;Mohammad&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="15"&gt;
        &lt;/td&gt;
        &lt;td&gt;Ellias&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="16"&gt;
        &lt;/td&gt;
        &lt;td&gt;Charlie&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="17"&gt;
        &lt;/td&gt;
        &lt;td&gt;Steve&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="18"&gt;
        &lt;/td&gt;
        &lt;td&gt;Froom&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="19"&gt;
        &lt;/td&gt;
        &lt;td&gt;Josh&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
           &lt;input type="checkbox" name="records[]" id="records" value="1"&gt;
        &lt;/td&gt;
        &lt;td&gt;Meerkat&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="20"&gt;
        &lt;/td&gt;
        &lt;td&gt;Toledo&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="checkbox" name="records[]" id="records" value="21"&gt;
        &lt;/td&gt;
        &lt;td&gt;Clay&lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
    &lt;/tr&gt;

    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;div id="page-nav"&gt;&lt;/div&gt;
</code></pre>

<p>JavaScript</p>

<pre><code>$("#ticAll").click(function () {
 $('input:checkbox').not(this).prop('checked', this.checked);
 });

 jQuery(function($) { 


    var items = $("#Table tr");
    console.log(items);

        var numItems ='21';  
        var perPage ='10' ;

        // only show the first 2 (or "first per_page") items initially
        items.slice(perPage).hide();

        // now setup pagination
        $("#page-nav").pagination({
            items: numItems,
            itemsOnPage:perPage,
            cssStyle: "dark-theme",
            onPageClick: function(pageNumber) {
                var showFrom = perPage * (pageNumber - 1);
                var showTo = showFrom + perPage;

                items.hide() 
                     .slice(showFrom, showTo).show();
            }
        });


        var checkFragment = function() {
            // if there's no hash, make sure we go to page 1
            var hash = window.location.hash || "#page-1";


            hash = hash.match(/^#page-(\d+)$/);

            if(hash)

                $("#page-nav").pagination("selectPage", parseInt(hash[1]));
        };


        $(window).bind("popstate", checkFragment);

        // and we'll also call it to check right now!
        checkFragment();
    }); 
</code></pre>