simple-datatables
Version:
A lightweight, dependency-free JavaScript HTML table plugin.
318 lines (303 loc) • 11.6 kB
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/svg+xml" href="../../favicon.svg">
<title>Init/destroy and import/export - simple-datatables</title>
<!-- DataTable Styles -->
<link rel="stylesheet" href="../dist/css/style.css">
<!-- Demo Styles -->
<link rel="stylesheet" href="../demo.css">
<style>
.controls {
padding: 0 10px;
}
button {
border-radius: 6px;
color: white;
border: none;
}
.success {
background-color: #1f8f4e;
}
.success:hover,
.success:focus {
background-color: #156537;
}
.danger {
background-color: #982d22;
}
.danger:hover,
.danger:focus {
background-color: #5e1a12;
}
.primary {
background-color: #2d84be;
}
.primary:hover,
.primary:focus {
background-color: #206491;
}
#hide.hidden {
display: none;
}
#hide label {
padding-left: 0.25em;
}
</style>
</head>
<body>
<header>
<h1>
<a href="../../">simple-datatables</a>
</h1>
<a href="../../documentation">Documentation</a>
<a href="../">Demos</a>
</header>
<h2>Init/destroy and import/export</h2>
<div class="controls">
<button id="init" type="button" class="success main">Init</button>
<button id="destroy" type="button" class="danger main">Destroy</button>
</div>
<table>
<thead>
<tr>
<th>Select</th>
<th>Customer</th>
<th>Version</th>
<th data-type="date" data-format="DD.MM.YYYY">Planned upgrade</th>
<th>DB-Info</th>
<th>Website info</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
Test one <br>CCode: 33123
</td>
<td>7.1.5</td>
<td>26.11.2018</td>
<td>
Server: s1 <br>DB: db1
</td>
<td>
Websitename: Red <br>Node: 10
</td>
</tr>
<tr>
<td></td>
<td>
Test two <br>CCode: 12353
</td>
<td>7.1.5.2</td>
<td>26.11.2019</td>
<td>
Server: s1 <br>DB: db2
</td>
<td>
Websitename: Green <br>Node: 6
</td>
</tr>
<tr>
<td></td>
<td>
Test three <br>CCode: 33522
</td>
<td>7.1.6</td>
<td>01.01.2020</td>
<td>
Server: s2 <br>DB: db1
</td>
<td>
Websitename: Orange <br>Node: 5
</td>
</tr>
<tr>
<td></td>
<td>
Test four <br>CCode: 25512
</td>
<td>7.1.7</td>
<td>26.03.2021</td>
<td>
Server: s1 <br>DB: db3
</td>
<td>
Websitename: Blue <br>Node: 10
</td>
</tr>
</tbody>
</table>
<div id="hide">
<strong>Column Visibility</strong>
<div class="form-group" id="columns"></div>
<br>
<strong>Import / Export Data</strong>
<div class="card-block">
<div class="form-group">
<textarea name="" id="" cols="30" rows="2" placeholder="Paste your CSV or JSON string here..."></textarea>
</div>
<div class="form-group">
<button type="button" class="primary import" data-type="csv">Import CSV</button>
<button type="button" class="primary import" data-type="json">Import JSON</button>
<button type="button" class="success export" data-type="csv">Export CSV</button>
<button type="button" class="success export" data-type="sql">Export SQL</button>
<button type="button" class="success export" data-type="json">Export JSON</button>
</div>
<div class="form-group">
<small>
Note: The csv column delimiters and line delimiters are set to <code>","</code>
and <code>"\n"</code> respectively.
</small>
</div>
</div>
</div>
<!-- Custom Code -->
<script type="module">
import {DataTable, convertJSON, convertCSV, exportCSV, exportSQL, exportJSON} from "../dist/module.js"
const createElement = (nodeName, attrs) => {
const dom = document.createElement(nodeName)
if (attrs && "object" == typeof attrs) {
for (const attr in attrs) {
if ("text" === attr) {
const text = document.createTextNode(attrs[attr])
dom.appendChild(text)
} else if ("html" === attr) {
dom.innerHTML = attrs[attr]
} else {
dom.setAttribute(attr, attrs[attr])
}
}
}
return dom
}
const checkboxes = document.getElementById("columns")
const table = document.getElementsByTagName("table")[0]
const textarea = document.getElementsByTagName("textarea")[0]
const hidden = []
const visible = []
let inputs = []
const datatable = new DataTable(table, {
perPage: 5,
columns: [
{
select: [1, 4, 5],
type: "html"
}
]
})
window.datatable = datatable
const updateColumns = function() {
datatable.columns.show(visible)
datatable.columns.hide(hidden)
}
const setCheckboxes = function() {
inputs = []
while (visible.length) {
visible.pop()
}
while (hidden.length) {
hidden.pop()
}
checkboxes.innerHTML = ""
datatable.data.headings.forEach((heading, i) => {
const checkbox = createElement("div", {
class: "checkbox"
})
const input = createElement("input", {
type: "checkbox",
id: `checkbox-${i}`,
name: "checkbox"
})
const label = createElement("label", {
for: `checkbox-${i}`,
html: heading.data
})
input.idx = i
if (datatable.columns.visible(i)) {
input.checked = true
visible.push(i)
} else {
if (hidden.indexOf(i) < 0) {
hidden.push(i)
}
}
checkbox.appendChild(input)
checkbox.appendChild(label)
checkboxes.appendChild(checkbox)
inputs.push(input)
})
inputs.forEach(input => {
input.onchange = function(_event) {
if (input.checked) {
hidden.splice(hidden.indexOf(input.idx), 1)
visible.push(input.idx)
} else {
visible.splice(visible.indexOf(input.idx), 1)
hidden.push(input.idx)
}
updateColumns()
}
})
}
datatable.on("datatable.init", () => {
setCheckboxes()
})
window.dt = datatable
textarea.addEventListener("input", function(_event) {
if (this.value.length) {
this.parentNode.classList.remove("error")
}
})
document.querySelectorAll(".export").forEach(el => {
el.addEventListener("click", _event => {
const type = el.dataset.type
const data = {
filename: `my-${type}`
}
if (type === "csv") {
data.columnDelimiter = ","
}
if (type==="csv") {
exportCSV(datatable, data)
} else if (type==="json") {
exportJSON(datatable, data)
} else if (type==="sql") {
exportSQL(datatable, data)
}
})
})
document.querySelectorAll(".main").forEach(el => {
el.addEventListener("click", _event => {
datatable[el.id]()
setTimeout(() => {
document.getElementById("hide").classList.toggle("hidden", !datatable.initialized)
table.classList.toggle("table", !datatable.initialized)
}, 10)
})
})
document.querySelectorAll(".import").forEach(el => {
el.addEventListener("click", _event => {
const type = el.dataset.type
const data = {
data: textarea.value
}
textarea.parentNode.classList.remove("error")
if (!data.data.length) {
textarea.parentNode.classList.add("error")
return false
}
if (type === "csv") {
const convertedData = convertCSV(data)
datatable.insert(convertedData)
} else if (type === "json") {
const convertedData = convertJSON(data)
datatable.insert(convertedData)
}
})
})
</script>
</body>
</html>