Bootstrap

Josephin DoeTyping . .

Lary Doeonline

Aliceonline

Alia10 min ago

Suzen15 min ago

Josephin DoeTyping . .

Lary Doeonline

Aliceonline

Alia10 min ago

Suzen15 min ago

Josephin DoeTyping . .

Lary Doeonline

Aliceonline

Alia10 min ago

Suzen15 min ago

Josephin DoeTyping . .

Lary Doeonline

Aliceonline

Alia10 min ago

Suzen15 min ago

Josephin Doe

Basic Table

use class table inside table element

Select	Customer	Version	Planned upgrade	DB-Info	Website info
	Test one CCode: 33123	7.1.5	26.11.2018	Server: s1 DB: db1	Websitename: Red Node: 10
	Test two CCode: 12353	7.1.5.2	26.11.2019	Server: s1 DB: db2	Websitename: Green Node: 6
	Test three CCode: 33522	7.1.6	01.01.2020	Server: s2 DB: db1	Websitename: Orange Node: 5
	Test four CCode: 25512	7.1.7	26.03.2021	Server: s1 DB: db3	Websitename: Blue Node: 10

Showing 1 to 4 of 4 entries

Import / Export Data

NOTE: The csv column delimiters and line delimiters are set to "," and "\n" respectively.

var table = document.querySelector("#pc-dt-methods"); var textarea = document.getElementsByTagName("textarea")[0]; var div = document.getElementById("data"); var btn = document.getElementsByTagName("button")[0]; var checkboxes = document.getElementById("columns"); var inputs = [], visible = [], hidden = []; var datatable = new simpleDatatables.DataTable(table, { perPage: 5, }); datatable.on("datatable.init", function () { setCheckboxes() }); function updateColumns() { try { datatable.columns().show(visible); datatable.columns().hide(hidden); } catch (e) { console.log(e); } } function setCheckboxes() { inputs = []; visible = []; checkboxes.innerHTML = ""; util.each(datatable.headings, function (i, heading) { var checkbox = util.createElement("div", { class: "form-check" }); var input = util.createElement("input", { type: "checkbox", id: "checkbox-" + i, name: "checkbox", class: "form-check-input" }); var label = util.createElement("label", { for: "checkbox-" + i, text: heading.textContent, class: "form-check-label" }); input.idx = i; if (datatable.columns().visible(heading.cellIndex)) { 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); }); util.each(inputs, function (i, input) { input.onchange = function (e) { 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(); }; }); } textarea.addEventListener("input", function (e) { if (this.value.length) { this.parentNode.classList.remove("error"); } }) document.querySelectorAll(".export").forEach(function (el) { el.addEventListener("click", function (e) { var type = el.dataset.type; var data = { type: type, filename: "my-" + type, }; if (type === "csv") { data.columnDelimiter = "|"; } datatable.export(data); }); }); document.querySelectorAll(".main").forEach(function (el) { el.addEventListener("click", e => { datatable[el.id](); setTimeout(function () { document.getElementById("hide").classList.toggle("hidden", !datatable .initialized); table.classList.toggle("table", !datatable.initialized); }, 10); }); }); document.querySelectorAll(".import").forEach(function (el) { el.addEventListener("click", e => { var type = el.dataset.type; var data = { type: type, data: textarea.value }; textarea.parentNode.classList.remove("error"); if (!data.data.length) { textarea.parentNode.classList.add("error"); return false; } datatable.import(data); }); });