<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<title></title>
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
</style>
</head>
<body>
<div id="table">
</div>
<script src="https://unpkg.com/[email protected]"></script>
<script src="script.js"></script>
</body>
</html>
var template = `<table>
<thead>
{{#head}}
<tr>{{#.}}<th onclick="sortByColumn(this);">{{.}}</th>{{/.}}</tr>
{{/head}}
</thead>
<tbody>
{{#body}}
<tr>{{#.}}<td>{{.}}</td>{{/.}}</tr>
{{/body}}
</tbody>
</table>`;
var input = "37+14*561-12.4/x";
var arr = [];
arr.push("");
for (var i=0; i<input.length;i++){
if (input[i] == "+" || input[i] == "*" || input[i] == "-" || input[i] == "/"){
arr.push(input[i]);
arr.push("");
}
else {
arr[arr.length-1] += input[i];
}
}
var table = { head: [[1,2,3,4]], body: [['a',3,2,4],['b',2,3,4],['c',5,1,5]] };
var tableFiltered = table;
var rpp = 10;
paginateTable(2);
filterTable('row[1] > 2');
function paginateTable(pageNumber){
var tablePage = {head: table.head};
tablePage.body = tableFiltered.body.slice((pageNumber-1)*rpp,pageNumber*rpp);
var rendered = Mustache.render(template, tablePage);
document.getElementById('table').innerHTML = rendered;
}
function filterTable(filterString){
tableFiltered = {head: table.head};
tableFiltered.body = [];
for (var i=0;i<table.body.length;i++){
var row = table.body[i];
if (eval(filterString)){
tableFiltered.body.push(row);
}
}
paginateTable(1);
}
#table {
}
#table th {
cursor: pointer;
}
About
This repl has simple functions to paginate or filter a HTML table.
To view this on TripleLog, click here.
HTML
The HTML simply displays the table.
CSS
Style the table by editing the CSS file.
JavaScript
The mustache.js templating system is used to generate basic tables. There are simple functions to paginate or filter the table.
TripleLog