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]);
if (!data.columns[order[i].column].orderable){
continue;
}
var ord = data.columns[order[i].column].data.replace(/\./g, '__');
if(order[i].dir != 'asc'){
ord = '-' + ord;
}
ajax_data.order_by.push(ord);
}
}
$.ajax({
url: url,
type: 'POST',
data: ajax_data,
cache: false,
headers: {'X-HTTP-Method-Override': 'GET'},
contentType: 'application/x-www-form-urlencoded'
}).then(callback);
},
});
}
$(function() {
$.ajaxSettings.traditional = true;
$.get(API_ROOT + RESOURCE_NAME + '/datatables.json').then(render_table);
});
<table id="results" width="100%" class="table table-striped table-bordered dataTable" cellspacing="0" role="grid" aria-describedby="example_info" style="width: 100%;">
</table>
External resources loaded into this fiddle: