Skip to content

Instantly share code, notes, and snippets.

@jordkris

jordkris/index.html

Last active August 5, 2021 00:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jordkris/6441958c73d4f51ea0a6c5b87ffbd356 to your computer and use it in GitHub Desktop.
Save jordkris/6441958c73d4f51ea0a6c5b87ffbd356 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="eng" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Tabel Example</title>
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
<h1>Tabel Example</h1>
<table class="display" id="tableExample" cellspacing="0" style="width:100%" border="1">
<thead>
<tr>
<th>ID</th>
<th>Album ID</th>
<th>Title</th>
<th>URL Photo</th>
</tr>
</thead>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
var data = null;
$(document).ready(function () {
$.ajax({
url: "https://jsonplaceholder.typicode.com/photos",
type: "GET",
success: function (result) {
data = {data: result};
},
error: function (result) {
console.log(result);
}
});
// datatable implementation
var table = $('#tableExample').DataTable({
"ajax": {
"url": 'https://jsonplaceholder.typicode.com/photos',
"dataSrc": data,
"type": "GET",
},
"columns": [
{ "data": 'id' },
{ "data": 'albumId' },
{ "data": 'title' },
{ "data": 'url' }
],
columnDefs: [{
targets: 3,
render: function(data, type, full, meta){
if(type === 'display'){
data = '<a href="'+data+'" target="_blank">'+data+'</a>';
}
return data;
}
}]
});
});
</script>
</body>
</html>
@jordkris
Copy link
Author

jordkris commented Aug 5, 2021

First Public Gist

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment