Question

Я использую ajax-datatables-rails . Ниже JS для моей информации. Я хочу конвертировать JavaScript в эквивалентный Opal.rb.

jQuery(document).ready(function() {
  var table = $('#organizations-datatable');
  var token = $('meta[name=csrf-token]').attr('content');
  table.DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
      "url": "/organizations/datatable.json",
      "type": 'POST',
      "beforeSend": function (xhr) {
          xhr.setRequestHeader('X-CSRF-Token', token)
        }
    },
    "pagingType": "full_numbers",
    "destroy": true,
    "columns": [
      {"data": "name"},
      {"data": "desc"},
      {"data": "industry"},
      {"data": "tags"}
    ],
    "iDisplayLength": 25
  });
});

Включает добавление токена CSRF в запрос ajax для данных.

Я бы хотел, чтобы весь наш javascript был написан как опал для удобства чтения и т. Д. Пожалуйста, не обсуждайте этот выбор, я только хочу понять, как заставить это работать как Opalrb через opal / rails-ujs / opal-jquery

Приведенный ниже опал не достигает того же, что и вышеупомянутый JS. Может кто-нибудь помочь мне понять, почему?

Element.expose :DataTable

Document.ready? do
  token     = Element['meta[name=csrf-token]'].attr('content');
  settings  = {
      "processing": true,
      "serverSide": true,
      "ajax": {
        "url": "/organizations/datatable.json",
        "type": 'POST',
        "beforeSend": lambda do
          xhr = `new window.XMLHttpRequest()`
          xhr.setRequestHeader('X-CSRF-Token', token)
        end 
      },
      "pagingType": "full_numbers",
      "destroy": true,
    "columns": [
      {"data": "name"},
      {"data": "desc"},
      {"data": "industry"},
      {"data": "tags"}
    ]
    }
  Element['#organizations-datatable'].DataTable(settings.to_n)

end

Что мне здесь не хватает? Почему этот Опал бесполезен?

Редактировать: Это мой маршрут для этого, это гарантирует, что POST работает для этого:

Rails.application.routes.draw do
    concern :with_datatable do
        post 'datatable', on: :collection
    end
    resources :organizations,   concerns: [:with_datatable]
end

Это мой связанный контроллер и код данных с использованием гема:

class OrganizationsController < ApplicationController
    def index
        @title              = "Organizations"
        @page_description   = "Organization data warehouse"
        @page_icon          = "institution"
        @organization       = Organization.new
        @load               = {data_table: true}
        @menu               = Menu.new 

      respond_to do |format|
        format.html
        format.json { render json: OrganizationDatatable.new(params) }
      end

    end

    def datatable
        logger.ap "datatable params: #{params}"
        respond_to do |format|
            format.json { render json: OrganizationDatatable.new(params) }
        end
    end

    def get_raw_records
        Organization.all
    end
    def create

    end
    def edit

    end
    def destroy

    end

    def show    
    end

    def update
    end

    def new
    end
end

Вот данные

class OrganizationDatatable < AjaxDatatablesRails::ActiveRecord

  extend Forwardable
  include ActionView::Helpers::TextHelper

  def_delegator :@view, :link_to

  def view_columns
    # Declare strings in this format: ModelName.column_name
    # or in aliased_join_table.column_name format

    @view_columns ||= {
      # id:       { source: "Organization.id"           },
      name:     { source: "Organization.name",cond: :like, searchable: true, orderable: true          },
      desc:     { source: "Organization.description",cond: :like, searchable: true, orderable: true   },
      industry: { source: "Organization.industry",cond: :like, searchable: true, orderable: true      },
      tags:     { source: "Organization.tag_list", searchable: false, orderable: false      }
    }
  end

  def data
    records.map do |record|
      {
        id:       record.id,
        name:     record.name,
        desc:     truncate(record.description,length: 240, separator: ' '),
        industry: record.industry,
        tags:     record.decorate.buttonize_tags,
        DT_RowId: record.id
      }
    end
  end

  def get_raw_records
    Organization.all
  end

end

Shoyeb Sheikh · Answer 1 · 25 апреля 2019

Я начну с указания нескольких ошибок в вашем коде,

Код в beforeSend проблематичен, пожалуйста, обратитесь к supplying-an-xhr-method , изменитьк приведенному ниже коду:

"beforeSend": lambda do |xhr|

`xhr.setRequestHeader('X-CSRF-Token', token)`

заключают операторы xhr в (`) обратные ссылки, как и операторы выше

столбцы должны иметь двумерный массив, а не массив объектов,

"columns": [ ["data": "name"], ["data": "desc"], ["data": "industry"], ["data": "tags"] ]

Остальная часть кода выглядит хорошо.

Ниже приведен проверенный код,

Element.expose :DataTable
Document.ready? do
  token     = Element['meta[name=csrf-token]'].attr('content');
  settings  = {
      "ajax": {
        "url": "/data.json",
        "type": 'POST',
        "beforeSend": lambda do |xhr|
          `xhr.setRequestHeader('X-CSRF-Token', token)`
        end 
      },
      "pagingType": "full_numbers",
      "destroy": true,
    "columns": [
      ["data": "Name"],
      ["data": "Position"],
      ["data": "Office"],
      ["data": "Extn."],
      ["data": "Start"],
      ["data": "Salary"]
    ]
    }
  Element['#organizations-datatable'].DataTable(settings.to_n)

end

Убедитесь, что у вас есть файл data.json в общей папке приложения rails, а его содержимое выглядит следующим образом:

{
    "data": [
      [
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$320,800"
      ],
      [
        "Garrett Winters",
        "Accountant",
        "Tokyo",
        "8422",
        "2011/07/25",
        "$170,750"
      ],
      [
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000"
      ],
      [
        "Cedric Kelly",
        "Senior Javascript Developer",
        "Edinburgh",
        "6224",
        "2012/03/29",
        "$433,060"
      ],
      [
        "Airi Satou",
        "Accountant",
        "Tokyo",
        "5407",
        "2008/11/28",
        "$162,700"
      ],
      [
        "Brielle Williamson",
        "Integration Specialist",
        "New York",
        "4804",
        "2012/12/02",
        "$372,000"
      ],
      [
        "Herrod Chandler",
        "Sales Assistant",
        "San Francisco",
        "9608",
        "2012/08/06",
        "$137,500"
      ],
      [
        "Rhona Davidson",
        "Integration Specialist",
        "Tokyo",
        "6200",
        "2010/10/14",
        "$327,900"
      ],
      [
        "Colleen Hurst",
        "Javascript Developer",
        "San Francisco",
        "2360",
        "2009/09/15",
        "$205,500"
      ],
      [
        "Sonya Frost",
        "Software Engineer",
        "Edinburgh",
        "1667",
        "2008/12/13",
        "$103,600"
      ],
      [
        "Jena Gaines",
        "Office Manager",
        "London",
        "3814",
        "2008/12/19",
        "$90,560"
      ],
      [
        "Quinn Flynn",
        "Support Lead",
        "Edinburgh",
        "9497",
        "2013/03/03",
        "$342,000"
      ],
      [
        "Charde Marshall",
        "Regional Director",
        "San Francisco",
        "6741",
        "2008/10/16",
        "$470,600"
      ],
      [
        "Haley Kennedy",
        "Senior Marketing Designer",
        "London",
        "3597",
        "2012/12/18",
        "$313,500"
      ],
      [
        "Tatyana Fitzpatrick",
        "Regional Director",
        "London",
        "1965",
        "2010/03/17",
        "$385,750"
      ],
      [
        "Michael Silva",
        "Marketing Designer",
        "London",
        "1581",
        "2012/11/27",
        "$198,500"
      ],
      [
        "Paul Byrd",
        "Chief Financial Officer (CFO)",
        "New York",
        "3059",
        "2010/06/09",
        "$725,000"
      ],
      [
        "Gloria Little",
        "Systems Administrator",
        "New York",
        "1721",
        "2009/04/10",
        "$237,500"
      ],
      [
        "Bradley Greer",
        "Software Engineer",
        "London",
        "2558",
        "2012/10/13",
        "$132,000"
      ],
      [
        "Dai Rios",
        "Personnel Lead",
        "Edinburgh",
        "2290",
        "2012/09/26",
        "$217,500"
      ],
      [
        "Jenette Caldwell",
        "Development Lead",
        "New York",
        "1937",
        "2011/09/03",
        "$345,000"
      ],
      [
        "Yuri Berry",
        "Chief Marketing Officer (CMO)",
        "New York",
        "6154",
        "2009/06/25",
        "$675,000"
      ],
      [
        "Caesar Vance",
        "Pre-Sales Support",
        "New York",
        "8330",
        "2011/12/12",
        "$106,450"
      ],
      [
        "Doris Wilder",
        "Sales Assistant",
        "Sidney",
        "3023",
        "2010/09/20",
        "$85,600"
      ],
      [
        "Angelica Ramos",
        "Chief Executive Officer (CEO)",
        "London",
        "5797",
        "2009/10/09",
        "$1,200,000"
      ],
      [
        "Gavin Joyce",
        "Developer",
        "Edinburgh",
        "8822",
        "2010/12/22",
        "$92,575"
      ],
      [
        "Jennifer Chang",
        "Regional Director",
        "Singapore",
        "9239",
        "2010/11/14",
        "$357,650"
      ],
      [
        "Brenden Wagner",
        "Software Engineer",
        "San Francisco",
        "1314",
        "2011/06/07",
        "$206,850"
      ],
      [
        "Fiona Green",
        "Chief Operating Officer (COO)",
        "San Francisco",
        "2947",
        "2010/03/11",
        "$850,000"
      ],
      [
        "Shou Itou",
        "Regional Marketing",
        "Tokyo",
        "8899",
        "2011/08/14",
        "$163,000"
      ],
      [
        "Michelle House",
        "Integration Specialist",
        "Sidney",
        "2769",
        "2011/06/02",
        "$95,400"
      ],
      [
        "Suki Burks",
        "Developer",
        "London",
        "6832",
        "2009/10/22",
        "$114,500"
      ],
      [
        "Prescott Bartlett",
        "Technical Author",
        "London",
        "3606",
        "2011/05/07",
        "$145,000"
      ],
      [
        "Gavin Cortez",
        "Team Leader",
        "San Francisco",
        "2860",
        "2008/10/26",
        "$235,500"
      ],
      [
        "Martena Mccray",
        "Post-Sales support",
        "Edinburgh",
        "8240",
        "2011/03/09",
        "$324,050"
      ],
      [
        "Unity Butler",
        "Marketing Designer",
        "San Francisco",
        "5384",
        "2009/12/09",
        "$85,675"
      ],
      [
        "Howard Hatfield",
        "Office Manager",
        "San Francisco",
        "7031",
        "2008/12/16",
        "$164,500"
      ],
      [
        "Hope Fuentes",
        "Secretary",
        "San Francisco",
        "6318",
        "2010/02/12",
        "$109,850"
      ],
      [
        "Vivian Harrell",
        "Financial Controller",
        "San Francisco",
        "9422",
        "2009/02/14",
        "$452,500"
      ],
      [
        "Timothy Mooney",
        "Office Manager",
        "London",
        "7580",
        "2008/12/11",
        "$136,200"
      ],
      [
        "Jackson Bradshaw",
        "Director",
        "New York",
        "1042",
        "2008/09/26",
        "$645,750"
      ],
      [
        "Olivia Liang",
        "Support Engineer",
        "Singapore",
        "2120",
        "2011/02/03",
        "$234,500"
      ],
      [
        "Bruno Nash",
        "Software Engineer",
        "London",
        "6222",
        "2011/05/03",
        "$163,500"
      ],
      [
        "Sakura Yamamoto",
        "Support Engineer",
        "Tokyo",
        "9383",
        "2009/08/19",
        "$139,575"
      ],
      [
        "Thor Walton",
        "Developer",
        "New York",
        "8327",
        "2013/08/11",
        "$98,540"
      ],
      [
        "Finn Camacho",
        "Support Engineer",
        "San Francisco",
        "2927",
        "2009/07/07",
        "$87,500"
      ],
      [
        "Serge Baldwin",
        "Data Coordinator",
        "Singapore",
        "8352",
        "2012/04/09",
        "$138,575"
      ],
      [
        "Zenaida Frank",
        "Software Engineer",
        "New York",
        "7439",
        "2010/01/04",
        "$125,250"
      ],
      [
        "Zorita Serrano",
        "Software Engineer",
        "San Francisco",
        "4389",
        "2012/06/01",
        "$115,000"
      ],
      [
        "Jennifer Acosta",
        "Junior Javascript Developer",
        "Edinburgh",
        "3431",
        "2013/02/01",
        "$75,650"
      ],
      [
        "Cara Stevens",
        "Sales Assistant",
        "New York",
        "3990",
        "2011/12/06",
        "$145,600"
      ],
      [
        "Hermione Butler",
        "Regional Director",
        "London",
        "1016",
        "2011/03/21",
        "$356,250"
      ],
      [
        "Lael Greer",
        "Systems Administrator",
        "London",
        "6733",
        "2009/02/27",
        "$103,500"
      ],
      [
        "Jonas Alexander",
        "Developer",
        "San Francisco",
        "8196",
        "2010/07/14",
        "$86,500"
      ],
      [
        "Shad Decker",
        "Regional Director",
        "Edinburgh",
        "6373",
        "2008/11/13",
        "$183,000"
      ],
      [
        "Michael Bruce",
        "Javascript Developer",
        "Singapore",
        "5384",
        "2011/06/27",
        "$183,000"
      ],
      [
        "Donna Snider",
        "Customer Support",
        "New York",
        "4226",
        "2011/01/25",
        "$112,000"
      ]
    ]
  }

add opalв Gemfile,

gem 'opal-rails'

gem 'opal-jquery'

application.js.rb содержимое,

require 'opal'
require 'jquery'
require 'opal-jquery'
require 'datatables.min'
require_tree '.'

добавить datatables.min.js файл в папку app/assets/javascripts

html,

<table id="organizations-datatable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

ПРИМЕЧАНИЕ : - Если вы хотите, чтобы он работал с POST, вам нужно настроить config/routes.rb,

Добавить следующую запись в rout.rb для вашего файла json,

Для меня это было

post '/data.json', :to => redirect('/data.json')

Для вас это будет

post '/organizations/datatable.json', :to => redirect('/organizations/datatable.json')

Полный код здесь https://gitlab.com/shoyebsheikh/opal-datatables

Решение Ajax datatables rails gem:

Вы можете добавить следующую строку к вашим маршрутам, предполагая, что это источник данных,

post '/organizations/datatable.json', :to => redirect('/organizations/datatable.json')

Ваш контроллер должен выглядеть так:,

class OrganizationsController < ApplicationController
    def datatable
        params["columns"] ||= { "0" => {"data" => "" } }
        params["length"]  ||= -1
        respond_to do |format|
            format.html
            format.json { render json: OrganizationDatatable.new(params) }
        end
    end
end

И ваши данные приведены следующим образом,

class OrganizationDatatable < AjaxDatatablesRails::ActiveRecord

  def view_columns
    # Declare strings in this format: ModelName.column_name
    # or in aliased_join_table.column_name format

    @view_columns ||= {
      # id:       { source: "Organization.id"           },
      name:     { source: "Organization.name",cond: :like, searchable: true, orderable: true          },
      desc:     { source: "Organization.description",cond: :like, searchable: true, orderable: true   },
      industry: { source: "Organization.industry",cond: :like, searchable: true, orderable: true      },
      tags:     { source: "Organization.tag_list", searchable: false, orderable: false      }
    }
  end

  def data
    records.map do |record|
      {
        # id:       record.id,
        name:     record.name,
        desc:     truncate(record.description,length: 240, separator: ' '),
        industry: record.industry,
        tags:     record.decorate.buttonize_tags,
        DT_RowId: record.id
      }
    end
  end

  def get_raw_records
    Organization.all
  end

end

В вашем organizations.js.rb идет код опала,

Document.ready? do
  token     = Element['meta[name=csrf-token]'].attr('content');
  settings  = {
      "ajax": {
        "url": Element['#organizations-datatable'].data('source'),
        "type": 'POST',
        "beforeSend": lambda do |xhr|
          `xhr.setRequestHeader('X-CSRF-Token', token)`
        end 
      },
      "pagingType": "full_numbers",
      "destroy": true,
    "columns": [
      {"data": "name"},
      {"data": "desc"},
      {"data": "industry"},
      {"data": "tags"}
    ]
    }
  Element['#organizations-datatable'].dataTable(settings.to_n)

end

А в html

<table id="organizations-datatable" data-source="<%= organizations_index_path(format: :json) %>">
  <thead>
    <tr>
      <th>Name</th>
      <th>Desc</th>
      <th>Industry</th>
      <th>tags</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

organizations_index_path может быть organizations_path или в единственном числе, как organization_index_path или organization_path в зависимости от имени вашего контроллера

Для получения дополнительной информации см. https://gitlab.com/shoyebsheikh/ajax-datatables-rails-with-opal.

Примечание:

Используется самоцвет mysql2.
Запуск миграций и добавление записей в таблицу из интерфейса командной строки rails или вручную в таблице.
Если вы запустили проект после установки всех зависимостей и запустили миграцию, посетите http://localhost:3000/user/index или http://localhost:3000/hello_world/index

Преобразование таблиц данных Javascript для использования приложения Opal в Rails

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Преобразование таблиц данных Javascript для использования приложения Opal в Rails

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы