Skip to content

Instantly share code, notes, and snippets.

@forzamilan

forzamilan/datatables_text.js

Created August 20, 2023 19:08
Show Gist options
  • Save forzamilan/58f1bc0e912dadde06f8382c9e74e745 to your computer and use it in GitHub Desktop.
Save forzamilan/58f1bc0e912dadde06f8382c9e74e745 to your computer and use it in GitHub Desktop.
Download ZIP
upgade for existing html table on external page
Raw
datatables_text.js
customjsReady('.leaderboard-text', function(element) {
//alert('leaderboard loaded');
//add html footer
$('.character-leaderboard-table').append('<tfoot><tr><td></td><td></td><td></td><td style="text-align: right;padding-right: 15px;"></td><td style="text-align: right;padding-right: 15px;"></td><td style="text-align: right;padding-right: 15px;"></td><td style="text-align: right;padding-right: 5px;"></td><td></td><td></td></tr></tfoot>');
//fancy styling
$('.character-leaderboard-table tbody td:nth-child(4)').css({
'text-align': 'right',
'padding-right': '15px'
});
$('.character-leaderboard-table tbody td:nth-child(5)').css({
'text-align': 'right',
'padding-right': '15px'
});
$('.character-leaderboard-table tbody td:nth-child(6)').css({
'text-align': 'right',
'padding-right': '15px'
});
$('.character-leaderboard-table tbody td:nth-child(8)').css({
'text-align': 'left',
'padding-left': '15px'
});
$('.character-leaderboard-table thead tr th:nth-child(7)').text('# tasks');
$('.character-leaderboard-table tbody tr:nth-child(1) td:nth-child(9)').css("font-size", "20px");
$('.character-leaderboard-table tbody tr:nth-child(2) td:nth-child(9)').css("font-size", "19px");
$('.character-leaderboard-table tbody tr:nth-child(3) td:nth-child(9)').css("font-size", "18px");
$('.character-leaderboard-table tbody tr:nth-child(4) td:nth-child(9)').css("font-size", "17px");
$('.character-leaderboard-table tbody tr:nth-child(5) td:nth-child(9)').css("font-size", "16px");
$('.character-leaderboard-table tbody tr:nth-child(6) td:nth-child(9)').css("font-size", "15px");
//datatables.net functions
var tbl = $('.character-leaderboard-table').DataTable({
dom: '<"top"i>rt<"bottom"flp><"clear">',
columnDefs: [{
targets: [7],
//orderData:-1,
render: function(data, type, row) {
//var roi = row[3] - row[4];
//var number = DataTable.render.number(' ', '.', 2, '').display(roi);
var cleanText = data.slice(data.indexOf('(') + 1, data.lastIndexOf(')'));
return cleanText;
}
},
{
targets: [3, 4, 5],
render: $.fn.dataTable.render.number(' ', '.', 2, '')
},
{
targets: [2],
render: function(data, type, row) {
var cleanLevel = data.slice(0, data.indexOf('('));
var cleanExp = data.slice(data.indexOf('(') + 1, data.lastIndexOf(')'));
if (type === 'display') {
return `<strong style="font-size:18px;">${cleanLevel}</strong> (${cleanExp})`;
}
return cleanExp;
}
}
],
footerCallback: function(row, data, start, end, display) {
var numFormatDec = $.fn.dataTable.render.number(' ', '.', 2).display;
var numFormat = $.fn.dataTable.render.number(' ', '.', 0).display;
let api = this.api();
api.column(1).footer().innerHTML = '<strong>Total (page)</strong><br><strong>Total (global)</strong>';
columns = [6, 3, 4, 5];
for (var i = 0; i < columns.length; i++) {
// Total over all pages
total = api
.column(columns[i])
.data()
.reduce((a, b) => parseFloat(a) + parseFloat(b), 0);
// Total over this page
pageTotal = api
.column(columns[i], {
page: 'current'
})
.data()
.reduce((a, b) => parseFloat(a) + parseFloat(b), 0);
// Update footer
var formatedPageTotal = (columns[i] === 6) ? numFormat(pageTotal) : numFormatDec(pageTotal);
var formatedTotal = (columns[i] === 6) ? numFormat(total) : numFormatDec(total);
api.column(columns[i]).footer().innerHTML =
'<strong style="color:orange;"> ' + formatedPageTotal + '</strong><br><strong style="color:green;">' + formatedTotal + '</strong>';
}
}
});
tbl.on('draw', function() {
console.log('Table redrawn');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment