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