Ruby on Rails - Datatables Server Side Processing - рисование 1, а не разбиение на страницы - PullRequest
0 голосов
/ 06 июня 2018

В настоящее время я работаю над новым веб-приложением Ruby on Rails и мне нужно использовать Datatables.js.Однако в прошлом я не использовал AJAX.

Я использую datatables.js вручную, а не с гемами ajax-datatables / jquery-datatables.Я нашел их слишком сложными для некоторых пользовательских данных в столбцах.

У меня есть данные, считываемые из parent.json, которые отлично работают на стороне клиента.Однако, как только я изменяю его на serverSide: true, он загружает и рендерит каждую запись в моей таблице, а не разбивает на страницы, а информация фильтра внизу говорит Showing 0 to 0 of 0 entries (filtered from NaN total entries).

My Datatables InitСкрипт

jQuery(document).ready(function() {
    var table = $('#parents-datatable').DataTable({
      "dom": 'trip',
      "serverSide": true,
      "retrieve": true,
      "processing": true,
      "ajax": { url: 'parents.json', dataSrc:''},
      "columns": [
        { data: null, render: function(data, row, type, set) { return '<a href="parents/'+ data.id + '">' + data.surname + '</a>'}, searchable: false, orderable: false },
        { data: "first_name" },
        { data: "other_name" },
        { data: null, render: function(data, row, type, set) { return '<a href="mailto: '+ data.email + '">' + data.email + '</a>' }, searchable: false, orderable: false },
        { data: null, searchable: false, orderable: false }
      ],
      columnDefs: [ {
        targets: [-1],
        render: function(data, row, type, set) {
          var arrears = data.current_arrears;
          var owing = data.owing_amount;
          var next = data.owing_next;
          var dd = data.is_direct_debit;
          var returnStatement = '';

          if(dd == 1) {
            returnStatement += '<div class="ui tiny label purple"><i class="laptop icon"></i>DD</div>';
          }

          if(arrears > 0) {
            returnStatement += '<div class="ui tiny label red" data-content="Arrears: $' + arrears +'" data-position="right center"><i class="exclamation triangle icon"></i>ARR</div>';
          } else if (owing > 0) {
            returnStatement += '<div class="ui tiny label yellow"><i class="flag sign icon"></i>CM</div>';
          } else if (next > 0) {
            returnStatement += '<div class="ui tiny label black"><i class="dollar sign icon"></i>NM</div>';
          } else {
            returnStatement += '<div class="ui tiny label green"><i class="check circle outline icon"></i>PAID</div>';
          }

          return returnStatement;
        },
        width: "100px"
      }],
      "pagingType": "simple",
      "lengthChange": false,
      "pageLength": 10,
      "autoWidth": false,
      "order": [[0, 'asc'], [1, 'asc']],
      "responsive": true,
      "renderer": "semanticUI"
    });

Мои родители # индекс Код

  def index
    @parents = Parent.all

    respond_to do |format|
      format.html
      format.json { render json: @parents }
    end
  end

.. Строка запроса от DevTools

draw: 1
columns[0][data]: 
columns[0][name]: 
columns[0][searchable]: false
columns[0][orderable]: false
columns[0][search][value]: 
columns[0][search][regex]: false
columns[1][data]: first_name
columns[1][name]: 
columns[1][searchable]: true
columns[1][orderable]: true
columns[1][search][value]: 
columns[1][search][regex]: false
columns[2][data]: other_name
columns[2][name]: 
columns[2][searchable]: true
columns[2][orderable]: true
columns[2][search][value]: 
columns[2][search][regex]: false
columns[3][data]: 
columns[3][name]: 
columns[3][searchable]: false
columns[3][orderable]: false
columns[3][search][value]: 
columns[3][search][regex]: false
columns[4][data]: 
columns[4][name]: 
columns[4][searchable]: false
columns[4][orderable]: false
columns[4][search][value]: 
columns[4][search][regex]: false
order[0][column]: 0
order[0][dir]: asc
order[1][column]: 1
order[1][dir]: asc
start: 0
length: 10
search[value]: 
search[regex]: false
_: 1528287839563

Дайте мне знать, если вам нужно что-нибудь еще.Я весь день просматривал документацию и все еще что-то упускаю.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...