JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<table id="mytable">
<thead>
</thead>
<tbody>
</tbody>
</table>
<button id="subscriptions_search">New subs</button>
JavaScript
var subscriptions = [{
user_id: 1,
subscription_id: 1,
user_name: "Bill",
subscription_frequency: 1,
subscription_price: 130,
kamuer_first_name: "Bill",
kamuer_username: "G.",
points_user: 5000,
save: "yes"
},
{
user_id: 3,
subscription_id: 4,
user_name: "James",
subscription_frequency: 3,
subscription_price: 190,
kamuer_first_name: "James",
kamuer_username: "H.",
points_user: 300,
save: "no"
}];
var oTable;
$(document).ready(function(){
oTable = jQuery('#mytable').dataTable({
"bFilter": false,
"iDisplayLength": 25,
"aLengthMenu": [[25], [25]],
"bProcessing": true,
"bJQueryUI": true,
"aaData": subscriptions,
"aoColumns": [
{"mData":"user_id", "bSortable": false},
{"mData":"subscription_id", "bSortable": false},
{"mData":"user_name", "bSortable": false},
{"mData":"subscription_frequency", "bSortable": false},
{"mData":"subscription_price", "bSortable": false},
{"mData":"kamuer_first_name", "bSortable": false, "sDefaultContent": null},
{"mData":"kamuer_username", "bSortable": false, "sDefaultContent": null},
{"mData":"points_user", "bSortable": false, "sDefaultContent": null,
},
{"mData":"save", "bSortable": false, "sDefaultContent": null
}
],
...