title: Using JQuery Server side datatables in ruby app and pagination shows blank page after 1st page
body: <p>I am using Jquery Server side datatables and am not able to get the pagination to work on pages 2+.</p>
  
  <p>I have 200 records.  The first page shows 50.  When I click the pagination numbers at the bottom of the page it navigates to page 2, but page 2 is empty.</p>
  
  <p>I am using non-serverside datatables in the same app (but another table) and it works fine.  </p>
  
  <p>In addition pagination, the select menu that chooses #of records to display per page is not working and column sorting is not working.</p>
  
  <p>Search is working</p>
  
  <p>I'm using:
  "1.12.4"
  Rails 5
   DataTables 1.10.16</p>
  
  <p><strong>index.json.jbuilder</strong></p>
  
  <pre><code>json.draw params[:draw]
  json.recordsTotal @cooks.length
  json.recordsFiltered @cooks.length
  json.data do
    json.array! @paginated do |cook|
      json.DT_RowClass "js-cook-row js-cook-row-#{donor.id}"
      if browser.device.mobile?
        json.partial! 'cooks/mobile_data', cook: cook, project: @project
      else
        json.partial! 'cooks/desktop_data', cook: cook, project: @project
      end
    end
  end
  </code></pre>
  
  <p><strong>Page with table (slim)</strong></p>
  
  <pre><code>table.table.table-striped.table-bordered.table-hover.js-cook-table.cooks-table.dataTables-example.small-font.kitchen-table id="#{table_id}" data-toggle="table" width="100%"
    thead
      tr
        - if source == RouteSourceConsts::WIZARD
          th.updated-th data-field="cook-checkbox"
        th.cook-category data-field="given" data-sortable="true" = t('cooks.table_title.given')
        th.cook-vendor data-field="cook_name" data-sortable="true" = t('cooks.table_title.name')
        th data-field="recipes" = t('cooks.table_title.recipes')
        th data-field="helper" data-sortable="true" = t('cooks.table_title.helper')
        th.status-info-th data-field="status" data-sortable="true" = t('cooks.table_title.status')
        - if source == RouteSourceConsts::WIZARD
          th data-field="contact_info" data-sortable="false" Info
          th.updated-th  data-field="updated" data-sortable="true" = t('cooks.table_title.updated')
  
    tbody.js-assignable-table-body
  
    javascript:
    $(document).ready(function () {
      var default_columns = [
        {data: "given", className: "cook-value-received"},
        {data: "cook_name", className: "cook-name"},
        {data: "recipes", className: "recipes-list", orderable: false},
        {data: "helper", className: "assignment-info.doer-info", orderable: true},
        {data: "status", className: "cook-status"}
      ];
  
      if (#{source == RouteSourceConsts::WIZARD}) {
        var columns = default_columns.concat([ {data: "contact_info", className: "cook-info"}, {data: "updated", className: "updated-at"}]);
        columns.unshift({data: "cook_checkbox"})
      } else {
        var columns = default_columns
      }
      if (#{source == RouteSourceConsts::WIZARD}) {
        var custom_options = {
          lengthMenu: [50, 100, 150],
        };
      } else {
        var custom_options = {lengthMenu: [50, 100, 150]};
      }
      var default_table_options = {
        autoWidth: false,
        serverSide: true,
        searching: true,
        searchDelay: 1000,
        paging: true,
        responsive: true,
        dom: '&lt;"pull-left"l&gt;&lt;"pull-right"f&gt;t&lt;"bottom"p&gt;&lt;"clear"&gt;',
        pagingType: "full_numbers",
        language: {emptyTable: '', zeroRecords: ''},
        ajax: {
          url: "#{project_cooks_path(project, source: source, type: type)}",
          type: 'GET',
          data: function (data) {
            data.type_filter = $('select.js-cook-type-filter').val()
          }
        },
        drawCallback: function (_settings) {
          initializecookStatusSelect();
          var pagination = $(this).closest('.js-donation-tabs, .js-cooks-main-container').find('.dataTables_paginate');
          pagination.toggle(this.api().page.info().pages &gt; 1);
        },
        headerCallback: function (_thead, _data, _start, _end, _display) {
          cells = $('##{table_id} th');
          $(cells[0]).removeClass('cook-value-received');
          $(cells[1]).removeClass('cook-name');
          $(cells[2]).removeClass('recipes-list');
          $(cells[3]).removeClass('assignment-info.doer-info');
          $(cells[4]).removeClass('cook-status');
          $(cells[5]).removeClass('cook-info');
          $(cells[6]).removeClass('updated-at');
        },
        columns: columns,
        order: []
      };
      $("##{table_id}").dataTable($.extend({}, default_table_options, custom_options));
  
      channel = pusher.subscribe('cooks-#{project.id}');
      channel.bind('update', function (_data) {
        $('##{table_id}').DataTable().rows().invalidate('data').draw(false);
      });
  
      channel = pusher.subscribe('cooks-#{project.id}');
      channel.bind('imported', function (_data) {
        $('##{table_id}').DataTable().rows().invalidate('data').draw(false);
      });
    });
  </code></pre>