Using JQuery Server side datatables in ruby app and pagination shows blank page after 1st page

I am using Jquery Server side datatables and am not able to get the pagination to work on pages 2+.

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.

I am using non-serverside datatables in the same app (but another table) and it works fine.

In addition pagination, the select menu that chooses #of records to display per page is not working and column sorting is not working.

Search is working

I'm using: "1.12.4" Rails 5 DataTables 1.10.16

index.json.jbuilder

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

Page with table (slim)

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: '<"pull-left"l><"pull-right"f>t<"bottom"p><"clear">',
      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 > 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);
    });
  });

Recommended topics

Hot tags