Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
164 lines (137 sloc) 6.07 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Creating Interactive Web Tables with DreamFactory and Tabulator</title>
<script
src="https://code.jquery.com/jquery-3.4.0.slim.min.js"
integrity="sha256-ZaXnYkHGqIhqTbJ6MB4l9Frs/r7U4jlx7ir8PJYBqbI="
crossorigin="anonymous"></script>
<link rel="shortcut icon" type="image/png" href="./mark-black.png"/>
<link href="https://unpkg.com/tabulator-tables@4.2.5/dist/css/tabulator_site.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.5/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="./config.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="./styles.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #323232">
<a class="navbar-brand" href="#">
<img src="./acmelogo.png" width="40" height="30" class="d-inline-block align-top" alt="">
Acme Corp.
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="http://guide.dreamfactory.com/">Learn More</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.dreamfactory.com/demo/">Book a Demo</a>
</li>
</ul>
</div>
</nav>
<div class="topic">
<h1>Creating Interactive Web Tables with DreamFactory and Tabulator</h1>
<p>This interactive data table was created with less than 30 lines of code using the DreamFactory API Platform and Tabulator.</p>
</div>
<div id="example-table"></div>
<script>
//custom max min header filter
var minMaxFilterEditor = function(cell, onRendered, success, cancel, editorParams){
var end;
var container = document.createElement("span");
//create and style inputs
var start = document.createElement("input");
start.setAttribute("type", "number");
start.setAttribute("placeholder", "Min");
start.setAttribute("min", 0);
start.setAttribute("max", 100);
start.style.padding = "4px";
start.style.width = "50%";
start.style.boxSizing = "border-box";
start.value = cell.getValue();
function buildValues(){
success({
start:start.value,
end:end.value,
});
}
function keypress(e){
if(e.keyCode == 13){
buildValues();
}
if(e.keyCode == 27){
cancel();
}
}
end = start.cloneNode();
start.addEventListener("change", buildValues);
start.addEventListener("blur", buildValues);
start.addEventListener("keydown", keypress);
end.addEventListener("change", buildValues);
end.addEventListener("blur", buildValues);
end.addEventListener("keydown", keypress);
container.appendChild(start);
container.appendChild(end);
return container;
}
//custom max min filter function
function minMaxFilterFunction(headerValue, rowValue, rowData, filterParams){
//headerValue - the value of the header filter element
//rowValue - the value of the column in this row
//rowData - the data for the row being filtered
//filterParams - params object passed to the headerFilterFuncParams property
if(rowValue){
if(headerValue.start != ""){
if(headerValue.end != ""){
return rowValue >= headerValue.start && rowValue <= headerValue.end;
}else{
return rowValue >= headerValue.start;
}
}else{
if(headerValue.end != ""){
return rowValue <= headerValue.end;
}
}
}
return false; //must return a boolean, true if it passes the filter.
}
var table = new Tabulator("#example-table", {
layout:"fitData",
height:"100%",
movableRows:true,
layout:"fitColumns",
pagination:"local",
paginationSize:20,
paginationSizeSelector:[20, 40, 60, 80],
placeholder:"No Data Set",
columns:[
{rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30},
{title:"Employee Number", field:"emp_no", sorter:"number", headerFilter:"number"},
{title:"First Name", field:"first_name", sorter:"string", headerFilter:"input"},
{title:"Last Name", field:"last_name", sorter:"string", headerFilter:"input"},
{title:"Birth Date", field:"birth_date", sorter:"date", headerFilter:"input"},
{title:"Hire Date", field:"hire_date", sorter:"date", headerFilter:"input"},
],
});
//Trigger sort when "Trigger Sort" button is clicked
$("#sort-trigger").click(function(){
table.setSort($("#sort-field").val(), $("#sort-direction").val());
});
$(document).ready(function(){
var ajaxConfig = {
dataType: 'json',
headers: {
"X-DreamFactory-Api-Key": config.apiKey
},
};
table.setData(config.url, {}, ajaxConfig);
});
</script>
</body>
</html>
You can’t perform that action at this time.