rails Datatables checkbox works first page incorporating javascript solution to hide checkbox input

I have a row of checkboxes as the first row. I have a check all/deselect all checkboxes feature. Currently the check all (and individual checks) only work on the first page.

This happens because

jQuery DataTables removes non-visible rows from DOM for performance reasons, that is why when you submit the form only visible checkboxes get submitted.

and the solution is

You may need to turn those that are checked and don't exist in DOM into upon form submission.

It is this question -> Checkboxes only work on first page - Datatables, rails

I have been tinkering with this jsfiddle -> http://ift.tt/2dDLkF4

I am using rails so this is my content_for

<%= content_for :footer_js do %>
  $('input.date').datepicker({dateFormat: "dd-mm-yy"});

  $('.filter').change(function(){
    $(this).closest('form').trigger('submit');
  });

  var oTable1 = $('#reporttypes').dataTable({
    aoColumns: [{ "bSortable": false
    }, null, null, null, null, null, null, null, null, null],
    aaSorting: [[10, 'desc']],
    bProcessing: true,
    bServerSide: true,
    sAjaxSource: $('#reporttypes'),
    bPaginate: true,
    iDisplayLength: 25,
    aLengthMenu: [25,50,100]
  });

  $('#example-select-all').on('click', function(){
    // Get all rows with search applied
    //var rows = table.rows({ 'search': 'applied' }).nodes();
    // Check/uncheck checkboxes for all rows in the table
    $('input[type="checkbox"]', rows).prop('checked', this.checked);
  });

  // Handle click on checkbox to set state of "Select all" control
  $('#example tbody').on('change', 'input[type="checkbox"]', function(){
    // If checkbox is not checked
    if(!this.checked){
        var el = $('#example-select-all').get(0);
        // If "Select all" control is checked and has 'indeterminate' property
        if(el && el.checked && ('indeterminate' in el)){
          // Set visual state of "Select all" control
          // as 'indeterminate'
          el.indeterminate = true;
        }
    }
  });

   // Handle form submission event
  $('#frm-example').on('submit', function(e){
    var form = this;

    // Iterate over all checkboxes in the table
    oTable1.$('input[type="checkbox"]').each(function(){
        // If checkbox doesn't exist in DOM
        if(!$.contains(document, this)){
          // If checkbox is checked
          if(this.checked){
              // Create a hidden element
              $(form).append(
                $('<input>')
                    .attr('type', 'hidden')
                    .attr('name', this.name)
                    .val(this.value)
              );
          }
        }
    });
  });
<% end %>

and here is my html

  <div class="table-responsive">
    <form id="frm-example" action="/path/to/your/script" method="POST">
      <table id="reporttypes" class="table table-striped table-bordered table-hover" data-source="<%= list_admin_report_types_path(format: 'json') %>">
        <thead>
          <tr>
            <!--<th class="select-row" data-orderable="false"></th>-->
            <th><input type="checkbox" name="select_all" value="1" id="example-select-all" style = "width: 20px; height: 20px"></th>
            <th>Order number</th>
            <th>Member Source</th>
            <th>Last name</th>
            <th>First name</th>
            <th>Email</th>
            <th>Name of DNA Report</th>
            <th>Lab Result Ready</th>
            <th>PDF Report Ready</th>
            <th>Order Submission Date</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </form>
  </div>

I understand the js snippets but just couldn't get the last one to work. $('#frm-example') The checkbox got lost when I click next because I have pagination. Not sure if this helps anybody.

and the footerjs is yielded into this layout file

<script type="text/javascript">
  $( document ).ready(function() {
    jQuery(function($) {
      $('table th input:checkbox').on('click' , function(){
        var that = this;
        $(this).closest('table').find('tr > td:first-child input:checkbox')
        .each(function(){
          this.checked = that.checked;
          $(this).closest('tr').toggleClass('selected');
        });
      });

      $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
      function tooltip_placement(context, source) {
        var $source = $(source);
        var $parent = $source.closest('table')
        var off1 = $parent.offset();
        var w1 = $parent.width();

        var off2 = $source.offset();
        var w2 = $source.width();

        if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
        return 'left';
      }

      <%= yield :footer_js %>
    });
  });
</script>