JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css">
<table id="results" width="100%" class="table table-striped table-bordered dataTable" cellspacing="0" role="grid" aria-describedby="example_info" style="width: 100%;">
</table>
JavaScript
RESOURCE_NAME = 'target';
API_ROOT = 'https://www.ebi.ac.uk/chembl/api/data/';
function isVowel(c) {
return ['a', 'e', 'i', 'o', 'u'].indexOf(c.toLowerCase()) !== -1
}
String.prototype.plural = function () {
if (this.slice(-1) === 'y') {
if ( isVowel(this.charAt(this.length - 2)) )
return this + 's';
else
return this.slice(0, -1) + 'ies';
}
else if (this.substring( this.length - 2) === 'us')
return this.slice(0, -2) + 'i';
else if (['ch', 'sh'].indexOf(this.substring( this.length - 2)) !== -1 || ['x','s'].indexOf(this.slice(-1)) !== -1)
return this + 'es';
else
return this + 's';
}
function render_table(data){
var table = $('#results');
var initial_ordering = null;
var ordering = false;
for (var i=0; i < data.columns.length; i++){
if (data.columns[i].orderable){
initial_ordering = [[i, 'asc']];
ordering = true;
break;
}
}
var dt = table
.on('xhr.dt', function ( e, settings, json, xhr ) {
json.recordsTotal = json.page_meta.total_count;
json.recordsFiltered = json.page_meta.total_count;
})
.DataTable({
"sAjaxDataProp": RESOURCE_NAME.plural(),
"columns": data.columns,
"processing": true,
"serverSide": true,
"bFilter": false,
"order": initial_ordering,
"ordering": ordering,
"ajax": function(data, callback, settings){
var url = API_ROOT + RESOURCE_NAME + ".json";
var ajax_data = {};
ajax_data.limit = data.length;
ajax_data.offset = data.start;
var order = data.order;
if(order.length){
ajax_data.order_by = [];
for(var i = 0; i < order.length; i++){
console.log(data.columns[order[i].column]);
...