JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<table id="example" data-role="datatable"
data-dt_scrolly="300px"
data-dt_dom="frtiS"
data-dt_deferloading="true"
data-dt_searching="evaluatedValue(true)"
data-dt_infocallback="referenceFunction"
data-dt_headercallback="nest.referenceFunction"
data-dt_drawcallback="function(){ alert('table was drawn.'); }"
data-dt_data="[{'RenderingEngine':'Trident', 'Browser': 'IE', 'Platform': 'Win 7', 'Engine': '1.7', 'Css': 'A'},{'RenderingEngine':'Trident', 'Browser': 'IE', 'Platform': 'Win 7', 'Engine': '1.7', 'Css': 'C'}]">
<thead>
<tr>
<th data-dt_data="RenderingEngine">Rendering engine</th>
<th data-dt_data="Browser">Browser</th>
<th data-dt_data="Platform">Platform(s)</th>
<th data-dt_data="Engine">Engine version</th>
<th data-dt_data="Css">Css Engine</th>
</tr>
</thead>
<tbody></tbody>
</table>
JavaScript
var referenceFunction = function () { alert('Im a reference function - table init complete'); };
var nest = {
referenceFunction: function () {
alert('Im a nesed reference function - header was drawn');
}
};
var evaluatedValue = function (value) { return value; };
/**
* jquery.initiaTable
* Written by William Gates ([email protected])
* Date: 10/13/14
*
* @author William Gates
* @version 2.0
*
* Allows dataTables to be intialized through HTML5 attributes.
* Will search through the objects passed in, and their decendents for anything
* matching table[data-role="datatable"] and will generate a config from the dom to
* apply them on dataTable init.
*
* If auto-creation is not desired $([selector]).initiaTable() will also initialize
* the specified element.
*
* Attributes should be prefixed with "dt_" followed by the option name
* Ex. data-dt-scrollY="100px"
*
*
**/
(function (jQuery) {
var initiaTable = {};
/*Because HTML 5 attributes do not allow casing we need to map.*/
var dtPropMap = {
/*DataTables Base*/
autowidth: "autoWidth",
deferrender: "deferRender",
info: "info",
jqueryui: "jQueryUI",
lengthchange: "lengthChange",
ordering: "ordering",
paging: "paging",
processing: "processing",
scrollx: "scrollX",
scrolly: "scrollY",
searching: "searching",
serverSide: "serverSide",
statesave: "stateSave",
data: "data",
ajax: "ajax",
createdrow: "createdRow",
drawcallback: "drawCallback",
footercallback: "footerCallback",
formatnumber: "formatNumber",
headercallback: "headerCallback",
infocallback: "infoCallback",
initcomplete: "initComplete",
predrawcallback: "preDrawCallback",
rowcallback: "rowCallback",
stateloadcallback: "stateLoadCallback",
stateloaded: "stateLoaded",
stateloadparams:...