In [1]:

require 'datatables'
require 'daru'

Install the spreadsheet gem version ~>1.1.1 for using spreadsheet functions.

Install the mechanize gem version ~>2.7.5 for using mechanize functions.

Out[1]:

true

In [2]:

df = Daru::DataFrame.new({b: [11,12,13,14,15], a: [1,2,3,4,5],
      c: [11,22,33,44,55]},
      order: [:a, :b, :c],
      index: [:one, :two, :three, :four, :five])

Out[2]:

Daru::DataFrame(5x3)

	a	b	c
one	1	11	11
two	2	12	22
three	3	13	33
four	4	14	44
five	5	15	55

In [9]:

DataTables.init_iruby

In [10]:

t = DataTables::DataTable.new(pageLength: 3)

Out[10]:

In [11]:

t.to_html

Out[11]:

"\n<script type='text/javascript'>\n  \n$(document).ready(function() {\n\n  $('#88a72449-82e7-467f-92fc-57bbf76cbe38').DataTable(\n    {pageLength: 3}\n  );\n\n});\n</script>\n"

In [12]:

t.to_html(id='table_id1')

Out[12]:

"\n<script type='text/javascript'>\n  \n$(document).ready(function() {\n\n  $('#table_id1').DataTable(\n    {pageLength: 3}\n  );\n\n});\n</script>\n"

In [13]:

table_opts = {
    class: "display", 
    cellspacing: "0",
    width: "100%" 
    }
options ={
    table_options: table_opts
} 
t.to_html(id='table_id1', options)

Out[13]:

"\n<script type='text/javascript'>\n  \n$(document).ready(function() {\n\n  $('#table_id1').DataTable(\n    {pageLength: 3}\n  );\n\n});\n</script>\n<table class=\"display\" cellspacing=\"0\" width=\"100%\" id=\"table_id1\"></table>"

In [14]:

# id is automatically added into table_options
options

Out[14]:

{:table_options=>{:class=>"display", :cellspacing=>"0", :width=>"100%", :id=>"table_id1"}}

In [15]:

options[:table_options][:table_html] = df.to_html_thead + df.to_html_tbody

Out[15]:

"<thead>\n  \n    <tr>\n      <th></th>\n      \n        <th>a</th>\n      \n        <th>b</th>\n      \n        <th>c</th>\n      \n    </tr>\n  \n</thead><tbody>\n  \n    <tr>\n      <td>one</td>\n      \n        <td>1</td>\n      \n        <td>11</td>\n      \n        <td>11</td>\n      \n    </tr>\n  \n    <tr>\n      <td>two</td>\n      \n        <td>2</td>\n      \n        <td>12</td>\n      \n        <td>22</td>\n      \n    </tr>\n  \n    <tr>\n      <td>three</td>\n      \n        <td>3</td>\n      \n        <td>13</td>\n      \n        <td>33</td>\n      \n    </tr>\n  \n    <tr>\n      <td>four</td>\n      \n        <td>4</td>\n      \n        <td>14</td>\n      \n        <td>44</td>\n      \n    </tr>\n  \n    <tr>\n      <td>five</td>\n      \n        <td>5</td>\n      \n        <td>15</td>\n      \n        <td>55</td>\n      \n    </tr>\n  \n\n  \n</tbody>"

In [16]:

html_code = t.to_html(id='table_id1', options)

Out[16]:

"\n<script type='text/javascript'>\n  \n$(document).ready(function() {\n\n  $('#table_id1').DataTable(\n    {pageLength: 3}\n  );\n\n});\n</script>\n<table class=\"display\" cellspacing=\"0\" width=\"100%\" id=\"table_id1\"><thead>\n  \n    <tr>\n      <th></th>\n      \n        <th>a</th>\n      \n        <th>b</th>\n      \n        <th>c</th>\n      \n    </tr>\n  \n</thead><tbody>\n  \n    <tr>\n      <td>one</td>\n      \n        <td>1</td>\n      \n        <td>11</td>\n      \n        <td>11</td>\n      \n    </tr>\n  \n    <tr>\n      <td>two</td>\n      \n        <td>2</td>\n      \n        <td>12</td>\n      \n        <td>22</td>\n      \n    </tr>\n  \n    <tr>\n      <td>three</td>\n      \n        <td>3</td>\n      \n        <td>13</td>\n      \n        <td>33</td>\n      \n    </tr>\n  \n    <tr>\n      <td>four</td>\n      \n        <td>4</td>\n      \n        <td>14</td>\n      \n        <td>44</td>\n      \n    </tr>\n  \n    <tr>\n      <td>five</td>\n      \n        <td>5</td>\n      \n        <td>15</td>\n      \n        <td>55</td>\n      \n    </tr>\n  \n\n  \n</tbody></table>"

In [17]:

# Fix me: It is showing normal html code. That means DataTables js and css is not working or loading.
IRuby.html html_code

Out[17]:

	a	b	c
one	1	11	11
two	2	12	22
three	3	13	33
four	4	14	44
five	5	15	55

In [18]:

html_code.html_safe

Out[18]:

"\n<script type='text/javascript'>\n  \n$(document).ready(function() {\n\n  $('#table_id1').DataTable(\n    {pageLength: 3}\n  );\n\n});\n</script>\n<table class=\"display\" cellspacing=\"0\" width=\"100%\" id=\"table_id1\"><thead>\n  \n    <tr>\n      <th></th>\n      \n        <th>a</th>\n      \n        <th>b</th>\n      \n        <th>c</th>\n      \n    </tr>\n  \n</thead><tbody>\n  \n    <tr>\n      <td>one</td>\n      \n        <td>1</td>\n      \n        <td>11</td>\n      \n        <td>11</td>\n      \n    </tr>\n  \n    <tr>\n      <td>two</td>\n      \n        <td>2</td>\n      \n        <td>12</td>\n      \n        <td>22</td>\n      \n    </tr>\n  \n    <tr>\n      <td>three</td>\n      \n        <td>3</td>\n      \n        <td>13</td>\n      \n        <td>33</td>\n      \n    </tr>\n  \n    <tr>\n      <td>four</td>\n      \n        <td>4</td>\n      \n        <td>14</td>\n      \n        <td>44</td>\n      \n    </tr>\n  \n    <tr>\n      <td>five</td>\n      \n        <td>5</td>\n      \n        <td>15</td>\n      \n        <td>55</td>\n      \n    </tr>\n  \n\n  \n</tbody></table>"

In [19]:

# Fix me: It is showing normal html code. That means DataTables js and css is not working or loading.
IRuby.html html_code

Out[19]:

	a	b	c
one	1	11	11
two	2	12	22
three	3	13	33
four	4	14	44
five	5	15	55

In [20]:

t_opts = {
        data: [[1,1,1],
          [1,2,3],
          [11,12,13],
          [1,2,3],
          [11,12,13],
          [1,2,3],
          [11,12,13]
        ],
        pageLength: 4
    }
    table_from_array = DataTables::DataTable.new(t_opts)
    table_opts = {
      class: "display",
      cellspacing: "0",
      width: "50%",
      table_html: "
      <thead>
            <tr>
                <th>Num1 </th>
                <th>Num2 </th>
                <th>Num3 </th>
            </tr>
        </thead>"
      }
    options = {
        table_options: table_opts
    }
    html_code_array_sorted = table_from_array.to_html(id='table_id4', options)

Out[20]:

"\n<script type='text/javascript'>\n  \n$(document).ready(function() {\n\n  $('#table_id4').DataTable(\n    {data: [[1,1,1],[1,2,3],[11,12,13],[1,2,3],[11,12,13],[1,2,3],[11,12,13]], pageLength: 4}\n  );\n\n});\n</script>\n<table class=\"display\" cellspacing=\"0\" width=\"50%\" id=\"table_id4\">\n      <thead>\n            <tr>\n                <th>Num1 </th>\n                <th>Num2 </th>\n                <th>Num3 </th>\n            </tr>\n        </thead></table>"

In [21]:

IRuby.html html_code_array_sorted

Out[21]:

Num1	Num2	Num3

In [22]:

IRuby.display(IRuby.javascript(table_from_array.to_html('id1')))

In [23]:

IRuby.html(table_from_array.to_html(id='table_id4', options))

Out[23]:

In [24]:

table_html = "
<table id='id1'>
      <thead>
            <tr>
                <th>Num1 </th>
                <th>Num2 </th>
                <th>Num3 </th>
            </tr>
        </thead>
</table>"

Out[24]:

"\n<table id='id1'>\n      <thead>\n            <tr>\n                <th>Num1 </th>\n                <th>Num2 </th>\n                <th>Num3 </th>\n            </tr>\n        </thead>\n</table>"

In [25]:

IRuby.html table_html

Out[25]:

Num1	Num2	Num3

In [ ]: