JSFiddle - React, Tailwind, and code Playground
by 2Yootz
HTML
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.0/js/dataTables.fixedHeader.min.js"></script>
<table id="accountOverview" class="table datatable">
<thead>
<tr>
<th>E-Mail</th>
<th>Platform</th>
<th>Coins</th>
<th>Profit / day</th>
<th>Playername</th>
<th>Tradepile Cards</th>
<th>Tradepile Value</th>
<th>Status</th>
</tr>
</thead>
</table>
JavaScript
$(document).ready(function () {
$('#accountOverview').dataTable({
"columns": [{
"data": "email"
}, {
"data": "platform"
}, {
"data": "coins"
}, {
"data": "profitDay"
}, {
"data": "playerName"
}, {
"data": "tradepileCards"
}, {
"data": "tradepileValue"
}, {
"data": "enabled"
}],
fixedHeader: true,
displayLength: 50
});
$.ajax('/echo/json/', {
type: 'post',
data: {
json: JSON.stringify([{
"email": "[email protected]",
"platform": "PS",
"coins": "0",
"profitDay": "0",
"playerName": "Salom\u00f3n Rond\u00f3n",
"tradepileCards": "0",
"tradepileValue": "0",
"enabled": "1"
}, {
"email": "[email protected]",
"platform": "PS",
"coins": "0",
"profitDay": "0",
"playerName": "Salomón Rondón",
"tradepileCards": "0",
"tradepileValue": "0",
"enabled": "1"
}, {
"email": "[email protected]",
"platform": "PS",
"coins": "0",
"profitDay": "0",
"playerName": "Salomón Rondón",
"tradepileCards": "0",
"tradepileValue": "0",
"enabled": "1"
}, {
"email": "[email protected]",
"platform": "PS",
"coins": "0",
"profitDay": "0",
"playerName": "Salomón Rondón",
"tradepileCards": "0",
"tradepileValue": "0",
"enabled": "1"
}, {
"email": "[email protected]",
"platform": "PS",
"coins": "0",
"profitDay": "0",
"playerName": "Salomón Rondón",
"tradepileCards": "0",
"tradepileValue": "0",
"enabled": "1"
}, {
"email": "[email protected]",
"platform": "PS",
"coins": "0",
"profitDay": "0",
"playerName": "Salomón Rondón",
"tradepileCards": "0",
"tradepileValue": "0",
"enabled": "1"
}, {
...