$(document).ready(function () {
//Source data definition
var tableData = [{
name: 'Clark Kent',
city: 'Metropolis',
race: 'cryptonian'
}, {
name: 'Bruce Wayne',
city: 'Gotham',
race: 'human'
}, {
name: 'Steve Rogers',
city: 'New York',
race: 'superhuman'
}, {
name: 'Peter Parker',
city: 'New York',
race: 'superhuman'
}, {
name: 'Thor Odinson',
city: 'Asgard',
race: 'god'
}, {
name: 'Jonathan Osterman',
city: 'New York',
race: 'superhuman'
}, {
name: 'Walter Kovacs',
city: 'New Jersey',
race: 'human'
}, {
name: 'Arthur Curry',
city: 'Atlantis',
race: 'superhuman'
}, {
name: 'Tony Stark',
city: 'New York',
race: 'human'
}, {
name: 'Scott Lang',
city: 'Coral Gables',
race: 'human'
}, {
name: 'Bruce Banner',
city: 'New York',
race: 'superhuman'
}
];
//DataTable definition
window.dataTable = $('#mytable').DataTable({
sDom: 'tF',
data: tableData,
columns: [{
data: 'name',
title: 'Name'
}, {
data: 'city',
title: 'City'
}, {
data: 'race',
title: 'Race'
}]
});
});
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="application/javascript" src="https://cdn.mfilter.tk/js/mfilter.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.mfilter.tk/css/mfilter.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>
