Alloy UI DataTable with existing html table

Question

Is it possible to create AlloyUI DataTable from existing html table? And apply some plugins to it like pagination?

Answer 1

Unfortunately, I don't think that there is a simple way to do this via the DataTable API. However, it's not too hard to extract the data from an existing <table> and insert it into a new one. You need to get the table via its id like so:

var dataTable = Y.one('#dataTableId');

Then you can extract the column header text by getting the innerHTML of the <th> elements:

tableHeaders = dataTable.one('thead').one('tr').all('th'),
columns = [], i = 0;
tableHeaders.each(function(node) {
    columns[i++] = node.get('innerHTML');
});

Similarly you will need to extract the innerHTML of all the <td> elements:

var tableRows = dataTable.one('tbody').all('tr'),
data = [], i = 0;
tableRows.each(function(node) {
    var row = node.all('td'), rowData = {}, j = 0;
    row.each(function(node) {
        rowData[columns[j++]] = node.get('innerHTML');
    });
    data[i++] = rowData;
});

Then remove the old <table>:

dataTable.remove(true);

Finally apply this data to an AlloyUI DataTable:

new Y.DataTable.Base({
    columnset: columns,
    recordset: data,
    render: true
});

Note: All of this code needs to be within a AUI/YUI sandbox (YUI().use('node-core', 'aui-datatable', function(Y) { /* Your code here ... */ });).

Runnable example (taken from the AlloyUI.com DataTable example):

YUI().use('aui-node', 'aui-datatable', function(Y) {

  var dataTable = Y.one('#dataTable'),
    tableHeaders = dataTable.one('thead').one('tr').all('th'),
    columns = [],
    i = 0;
  tableHeaders.each(function(node) {
    columns[i++] = node.get('innerHTML');
  });

  var tableRows = dataTable.one('tbody').all('tr'),
    data = [],
    i = 0;
  tableRows.each(function(node) {
    var row = node.all('td'),
      rowData = {},
      j = 0;
    row.each(function(node) {
      rowData[columns[j++]] = node.get('innerHTML');
    });
    data[i++] = rowData;
  });

  dataTable.remove(true);
  new Y.DataTable.Base({
    boundingBox: '.yui3-skin-sam',
    columnset: columns,
    recordset: data,
    render: true
  });
});

<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet" />

<div class="yui3-skin-sam">
  <table id="dataTable" class="yui3-datatable-table" cellspacing="0">
    <thead class="yui3-datatable-columns">
      <tr>
        <th colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-first-header yui3-datatable-col-name" scope="col" data-yui3-col-id="name">name</th>
        <th colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-col-address" scope="col" data-yui3-col-id="address">address</th>
        <th colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-col-city" scope="col" data-yui3-col-id="city">city</th>
        <th colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-col-state" scope="col" data-yui3-col-id="state">state</th>
      </tr>
    </thead>
    <tbody class="yui3-datatable-data">
      <tr data-yui3-record="model_1" class="yui3-datatable-even">
        <td class="yui3-datatable-col-name  yui3-datatable-cell ">John A. Smith</td>
        <td class="yui3-datatable-col-address  yui3-datatable-cell ">1236 Some Street</td>
        <td class="yui3-datatable-col-city  yui3-datatable-cell ">San Francisco</td>
        <td class="yui3-datatable-col-state  yui3-datatable-cell ">CA</td>
      </tr>
      <tr data-yui3-record="model_2" class="yui3-datatable-odd">
        <td class="yui3-datatable-col-name  yui3-datatable-cell ">Joan B. Jones</td>
        <td class="yui3-datatable-col-address  yui3-datatable-cell ">3271 Another Ave</td>
        <td class="yui3-datatable-col-city  yui3-datatable-cell ">New York</td>
        <td class="yui3-datatable-col-state  yui3-datatable-cell ">NY</td>
      </tr>
      <tr id="yui_patched_v3_11_0_1_1424728454260_129" data-yui3-record="model_3" class="yui3-datatable-even">
        <td class="yui3-datatable-col-name  yui3-datatable-cell ">Bob C. Uncle</td>
        <td class="yui3-datatable-col-address  yui3-datatable-cell ">9996 Random Road</td>
        <td class="yui3-datatable-col-city  yui3-datatable-cell ">Los Angeles</td>
        <td class="yui3-datatable-col-state  yui3-datatable-cell ">CA</td>
      </tr>
      <tr data-yui3-record="model_4" class="yui3-datatable-odd">
        <td class="yui3-datatable-col-name  yui3-datatable-cell ">John D. Smith</td>
        <td class="yui3-datatable-col-address  yui3-datatable-cell ">1623 Some Street</td>
        <td class="yui3-datatable-col-city  yui3-datatable-cell ">San Francisco</td>
        <td class="yui3-datatable-col-state  yui3-datatable-cell ">CA</td>
      </tr>
      <tr data-yui3-record="model_5" class="yui3-datatable-even">
        <td class="yui3-datatable-col-name  yui3-datatable-cell ">Bob F. Uncle</td>
        <td class="yui3-datatable-col-address  yui3-datatable-cell ">9899 Random Road</td>
        <td class="yui3-datatable-col-city  yui3-datatable-cell ">Los Angeles</td>
        <td class="yui3-datatable-col-state  yui3-datatable-cell ">CA</td>
      </tr>
    </tbody>
  </table>
</div>