Question

我目前正在开发一个新的Ruby on Rails Web应用程序，我需要使用Datatables.js。但是我过去没有使用过AJAX。

我手动使用datatables.js而不是使用ajax-datatables / jquery-datatables gems。我发现它们对列中的一些自定义数据太麻烦了。

我有来自parent.json的数据表读取，它完全适用于客户端。但是，只要我将其更改为serverSide: true，它就会加载并呈现表格中的每条记录，而不是分页，底部的过滤器信息会显示Showing 0 to 0 of 0 entries (filtered from NaN total entries)。

我的数据表初始化脚本

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"
    });

我的父母#index Code

  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

如果您还有其他需要，请告诉我。我整天都在阅读文档，但仍然遗漏了一些东西。

Ruby on Rails - 数据表服务器端处理 - 绘制1而不是分页

0 个答案: