title: Store Table Row Selections Across Multiple Pages
body: <p>I have a search results table with a checkbox allowing users to select 1 or more rows - this is working fine on a single page at the moment. However I have to use pagination to limit the results to 20 rows per page, so once the user clicks the Next Page button to go to the 2nd page of search results their selections are lost.</p>
  
  <p>Is there a way to keep their selections from page to page?</p>
  
  <p>Here's an example of how the table appears with the script that sets a hidden form input:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  
  
    //column checkbox select all or cancel
    $("input.select-all").click(function() {
      var checked = this.checked;
      $("input.select-item").each(function(index, item) {
        item.checked = checked;
      });
      // update the hidden input with the selected selectedProductIDs
      var items = [];
      $("input.select-item:checked:checked").each(function(index, item) {
        items[index] = item.value;
      });
      if (items.length &lt; 1) {
        $('#selectedProductIDs').val('');
      } else {
        var values = items.join(',');
        $('#selectedProductIDs').val(values);
      }
    });
  
    //check selected items
    $("input.select-item").click(function() {
      var checked = this.checked;
      console.log(checked);
      checkSelected();
      // update the hidden input with the selected assetIDs
      var items = [];
      $("input.select-item:checked:checked").each(function(index, item) {
        items[index] = item.value;
      });
      if (items.length &lt; 1) {
        $('#selectedProductIDs').val('');
      } else {
        var values = items.join(',');
        $('#selectedProductIDs').val(values);
      }
  
    });
  
    //check is all selected
    function checkSelected() {
      var all = $("input.select-all")[0];
      var total = $("input.select-item").length;
      var len = $("input.select-item:checked:checked").length;
      console.log("total:" + total);
      console.log("len:" + len);
      all.checked = len === total;
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="table table-condensed table-striped table-bordered"&gt;
    &lt;thead&gt;
      &lt;th&gt;&lt;input type="checkbox" class="select-all checkbox" name="select-all" /&gt;&lt;/th&gt;
      &lt;th class="text-center" scope="col"&gt;Product ID&lt;/th&gt;
      &lt;th class="text-center" scope="col"&gt;Description&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
  
      &lt;tr class="" id="85799"&gt;
        &lt;td&gt;&lt;input type="checkbox" class="select-item checkbox" name="select-item" value="AT36288" /&gt;&lt;/td&gt;
        &lt;td&gt;12345&lt;/td&gt;
        &lt;td&gt;Apples&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="" id="85800"&gt;
        &lt;td&gt;&lt;input type="checkbox" class="select-item checkbox" name="select-item" value="AT36289" /&gt;&lt;/td&gt;
        &lt;td&gt;67890&lt;/td&gt;
        &lt;td&gt;Bananas&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="" id="85801"&gt;
        &lt;td&gt;&lt;input type="checkbox" class="select-item checkbox" name="select-item" value="AT36290" /&gt;&lt;/td&gt;
        &lt;td&gt;55441&lt;/td&gt;
        &lt;td&gt;Oranges&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;form class="form-horizontal" id="processSelections" action="processSelections.php" method="post" role="form"&gt;
    &lt;input type="hidden" name="selectedProductIDs" id="selectedProductIDs" value=""&gt;
  
    &lt;div&gt;
  
      &lt;div class="text-center"&gt;
        &lt;button type="submit" name="buttonType" value="createShipments" id="save" class="btn btn-success"&gt;Process Selections&lt;/button&gt; &amp;nbsp; &amp;nbsp;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>