title: DataTables - Checkbox Selection - pagination does not retain the values of the selected checkboxes
body: <p>I'm using jQuery datatables on a table which contains two fields:
  a. image names
  b. image size</p>
  
  <p>The first column of the table (image names) contain checkboxes for selection which I have added using html. The data in the table is updated from a textfile.</p>
  
  <p>There is a button called make image set. The user should be able to select multiple images and click on the make image set button, which will show a modal with the selected image names. The user can then enter a set name and submit. </p>
  
  <p>However, the problem now is that when datatables pagination takes place, the string which gets the image names (that is displayed on the modal box) only contains the image name of the current page. For example, if I select 2 images from the first page and 2 from the second and if I'm on the second page when I press the "Make image set" button, only the last two image names are displayed in the modal box. </p>
  
  <p>Is there a way in which I can retain the selection of the checkboxes in order to ensure correct selection display on the modal?</p>
  
  <p>The Javascript Code:</p>
  
  <pre><code>        var cellsSelected="";
  $(document).ready(function() {
  var dataTable = $('#table_id').DataTable( {
      columnDefs: [ {
          orderable: false,
          className: 'select-checkbox',
          targets:   0
      } ],
      select: {
          style:    'multi',
          selector: 'td:first-child'
      },
      lengthMenu: [[5,10, 25, -1], [5, 10, 25, "All"]],
      pageLength: 5 
  } );
            $('checkboxed').on('click', function() {
      cellsSelected = dataTable.rows({ selected: true }).data();
  });
  
              $('#settable_id').dataTable({
      "lengthMenu": [[5,10, 25, -1], [5, 10, 25, "All"]],
          "pageLength": 5
  });
  } );
  </code></pre>
  
  <p>The HTML Code:</p>
  
  <pre><code>&lt;table id="table_id" class="table table-responsive table-bordered table-condensed"&gt;
     &lt;thead&gt;
        &lt;tr&gt;
           &lt;th colspan= "2" class="text-center"&gt;&lt;span style="color:white;" aria-hidden="true"&gt;&lt;font size="3"&gt;&lt;strong&gt;Image &amp; SMU Repository &lt;/strong&gt;&lt;/font&gt;&lt;/span&gt;
  &lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td class="text-center verticalalign" style="vertical-align: middle; background-color: #98b6d9;"&gt;&lt;span style="color: black;" aria-hidden="true"&gt;&lt;strong&gt;Image Name&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
           &lt;td class="text-center verticalalign" style="vertical-align: middle; background-color: #98b6d9;"&gt;&lt;span style="color: black;" aria-hidden="true"&gt;&lt;strong&gt;File Size&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
        &lt;form role="form" id="myForm" method="post"&gt;
           &lt;div class="form-group"&gt;
              &lt;?php $first1 = ""; $second1 = "";$str = 'size';$a=0;$mylines = file('./view_images.txt');foreach($mylines as $myline){$first1 = $second1;$second1 = $myline;$str1 = (string)$second1;if($a == 1){$sizeChunks = explode(",", $second1); ?&gt;
              &lt;td style="vertical-align: middle;"&gt;&lt;span style="color:black;"&gt;&lt;a href="./Repository.php" title="MD5 = &lt;?php echo $sizeChunks[1] ?&gt; " class="myClass"&gt;&lt;?php echo preg_replace('~\D~', '', $sizeChunks[0]); ?&gt;&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;?php $a=0;continue;}if($first1 == "" or $first1 == "\n"){?&gt;
              &lt;tr&gt;
                 &lt;td style="vertical-align: middle;" &gt;
                    &lt;div class="checkbox"&gt;&lt;label&gt;&lt;input type="checkbox" id="checkboxed" name="myCheck" value="&lt;?php echo $second1; ?&gt;"&gt;&lt;span style="color:black;"&gt;&lt;?php echo trim($second1); ?&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;
                 &lt;/td&gt;
                 &lt;?php }else{if($second1 == "\n"){?&gt; 
              &lt;/tr&gt;
                 &lt;?php } else{if(strcmp(trim($str1), trim($str)) == 0){ $a=1;continue;}?&gt;
              &lt;td style="vertical-align: middle;"&gt;&lt;span style="color:black;"&gt;&lt;?php echo trim($second1); ?&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;?php }}}?&gt;
           &lt;/div&gt;
        &lt;/form&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;div class="modal fade" id="myModal" role="dialog"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;&lt;span style="color:black;" aria-hidden="true"&gt;&lt;/span&gt;Create Image Sets&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body" id="imgmodal"&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
  
                      &lt;button type="submit" class="btn btn-primary" id="submitimgset"&gt;&lt;span style="color:black;" aria-hidden="true"&gt;&lt;/span&gt;Submit&lt;/button&gt;
                      &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;&lt;span style="color:black;" aria-hidden="true&gt;&lt;/span&gt;Cancel&lt;/button&gt;
  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The make image set button -</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary btn-md" data-target="#myModal" id="make_image_set_id" onclick="imagesumrep()"&gt;&lt;span style="color:black;" aria-hidden="true"&gt;&lt;/span&gt;Make Image Set&lt;/button&gt;
  </code></pre>
  
  <p>The Javascript function for the button - </p>
  
  <pre><code>function imagesumrep() {
              if(cellsSelected == ""){
                  document.getElementById('imgmodal').innerHTML= "Error! &lt;br&gt; Please select images and try again!";
  
                                    $('#myModal').modal('show'); 
  
              }
              else{   
              document.getElementById('imgmodal').innerHTML= "&lt;h4&gt;&lt;strong&gt;&lt;u&gt;Images Selected:&lt;/u&gt;&lt;/strong&gt;&lt;/h4&gt;" + "&lt;strong&gt;" + cellsSelected + "&lt;/strong&gt; "+ "&lt;br /&gt;&lt;br /&gt;"+ "&lt;h4&gt;&lt;strong&gt;&lt;u&gt;Image Set Name:&lt;/u&gt;&lt;/strong&gt;&lt;/h4&gt;" + "&lt;input type ='text' name='setName' id='noname' size='70'&gt;&lt;br /&gt;&lt;br /&gt;";
              setTimeout(function(){
                                    $('#myModal').modal('show'); 
                                }, 600); 
             }
             }
  </code></pre>
  
  <p>Please help me! I'm totally new to DataTables! I've made changes as suggested by Adam. Now, the modal box is not opening at all and I'm getting an error - "Uncaught ReferenceError: dataTable is not defined".</p>
  
  <p>The scripts I've included are:</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.12/sorting/num-html.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css" /&gt;
  
  &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>