那些遇到过的问题

转换Javascript数据表以在Rails应用中使用Opal

Mic*_*son 7 javascript ajax ruby-on-rails datatables opalrb

我正在使用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
  });
});
Run Code Online (Sandbox Code Playgroud)

它包括将CSRF令牌添加到对数据的ajax请求中。

我希望我们所有的JavaScript都被编写为蛋白石，以提高可读性，等等。请不要争论这种选择，我只想了解如何通过opal / rails-ujs / opal-jquery将其用作Opalrb

下面的蛋白石与上面的JS不能实现相同的效果。谁能帮我理解原因？

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
  });
});
Run Code Online (Sandbox Code Playgroud)

我在这里想念什么？为什么这个蛋白石不好呢？

编辑：这是我的路线，这可以确保POST为此工作：

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
Run Code Online (Sandbox Code Playgroud)

这是我使用gem的相关控制器和数据表代码：

Rails.application.routes.draw do
    concern :with_datatable do
        post 'datatable', on: :collection
    end
    resources :organizations,   concerns: [:with_datatable]
end
Run Code Online (Sandbox Code Playgroud)

这是数据表

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
Run Code Online (Sandbox Code Playgroud)

Sho*_*ikh 2

我将首先指出你的代码中的一些错误，

  1. beforeSend 中的代码有问题请参考Supplying-an-xhr-method，将其更改为以下代码，

    "beforeSend": lambda do |xhr|

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

将 xhr 语句括在 ( ` ) 反引号中，如上面的语句

  1. 列应该有二维数组而不是对象数组，

    "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
Run Code Online (Sandbox Code Playgroud)

确保data.jsonrails应用程序的公共文件夹中有文件，内容如下，

{
    "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"
      ]
    ]
  }
Run Code Online (Sandbox Code Playgroud)

添加，opal​Gemfile

gem 'opal-rails'

gem 'opal-jquery'
Run Code Online (Sandbox Code Playgroud)

application.js.rb内容，

require 'opal'
require 'jquery'
require 'opal-jquery'
require 'datatables.min'
require_tree '.'
Run Code Online (Sandbox Code Playgroud)

将文件添加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>
Run Code Online (Sandbox Code Playgroud)

注意：- 如果您希望它与 POST 一起使用，您必须调整您的config/routes.rb，

在 json 文件的 paths.rb 中添加以下条目，

对我来说，

post '/data.json', :to => redirect('/data.json')
Run Code Online (Sandbox Code Playgroud)

对你来说将会是，

post '/organizations/datatable.json', :to => redirect('/organizations/datatable.json')
Run Code Online (Sandbox Code Playgroud)

完整代码在这里 https://gitlab.com/shoyebsheikh/opal-datatables

Ajax数据表rails gem解决方案：

假设这是数据源，您可以将以下行添加到您的路由中，

post '/organizations/datatable.json', :to => redirect('/organizations/datatable.json')
Run Code Online (Sandbox Code Playgroud)

你的控制器应该是这样的，

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
Run Code Online (Sandbox Code Playgroud)

你的数据表如下，

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
Run Code Online (Sandbox Code Playgroud)

在你的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
Run Code Online (Sandbox Code Playgroud)

在 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>
Run Code Online (Sandbox Code Playgroud)

organizations_index_path可以是organizations_path或单数形式organization_index_path或organization_path取决于您的控制器名称

请参阅https://gitlab.com/shoyebsheikh/ajax-datatables-rails-with-opal了解更多信息。

笔记：

  1. 使用mysql2 gem。
  2. 运行迁移并从 Rails CLI 或手动在表中将条目添加到表中。
  3. 如果您在安装所有依赖项并运行迁移后运行项目，请访问http://localhost:3000/user/index或 http://localhost:3000/hello_world/index

归档时间：

查看次数：

290 次

最近记录：

6 年，7 月 前
相关归档
Angularjs - 显示当前日期 125
使用Regex删除Javascript中的HTML标记 102
如何使用connect w/Redux从this.props进行简单的调度？ 100
有没有办法在javascript中打印对象的所有方法？ 66
Angular的$ q.reject()vs deferred.reject() 64
JavaScript将ID属性添加到另一个创建的Element 43
简单的ajax表单使用javascript没有jQuery 20
ES6生成器:来自iterator.throw的错误堆栈跟踪(错误) 18
Rails非正统命名模型与缩写 13
回形针错误 12
难疑归档
grep一个文件,但显示几个周围的行？ 3277
如何使用Curl从终端/命令行发布JSON数据到测试Spring REST？ 2606
我怎样才能过渡高度:0; 高度:自动; 用CSS？ 1985
JavaScript中的'new'关键字是什么？ 1684
如何遍历C#中的所有枚举值？ 1359
为什么Dictionary优先于Hashtable？ 1348
const和readonly有什么区别？ 1269
Android SDK安装找不到JDK 1185
如何将包含文件的文件夹复制到Unix/Linux中的另一个文件夹？ 1145
活动已泄露最初添加的窗口 1117