simple-datatables
Version:
A lightweight, dependency-free JavaScript HTML table plugin.
101 lines (98 loc) • 4.99 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>Updating - simple-datatables</title>
<!-- DataTable Styles -->
<link rel="stylesheet" href="../dist/css/style.css">
<!-- Demo Styles -->
<link rel="stylesheet" href="../demo.css">
</head>
<body>
<header>
<h1>
<a href="../../">simple-datatables</a>
</h1>
<a href="../../documentation">Documentation</a>
<a href="../">Demos</a>
</header>
<h2>Updating</h2>
<p>
Replace <i>first</i> match in a specified column.
</p>
<div id="update-div">
<label for="column">Column</label>
<select id="column"></select>
<label for="find">Find</label>
<input id="find">
<label for="replace">Replace</label>
<input id="replace">
<button id="update">Update</button>
</div>
<br>
<script src="../dist/umd.js"></script>
<script>
const table = document.createElement("table")
const data = {
"headings": ["Name", "Job", "Company", "Ext.", "Start Date", "Email", "Phone No."],
"data": [
["Hedwig F. Nguyen", "Manager", "Arcu Vel Foundation", "9875", "03/27/2017", "nunc.ullamcorper@metusvitae.com", "070 8206 9605"],
["Genevieve U. Watts", "Manager", "Eget Incorporated", "9557", "07/18/2017", "Nullam.vitae@egestas.edu", "0800 025698"],
["Kyra S. Baldwin", "Manager", "Lorem Vitae Limited", "3854", "04/14/2016", "in@elita.org", "0800 237 8846"],
["Stephen V. Hill", "Manager", "Eget Mollis Institute", "8820", "03/03/2016", "eu@vel.com", "0800 682 4591"],
["Vielka Q. Chapman", "Manager", "Velit Pellentesque Ultricies Institute", "2307", "06/25/2017", "orci.Donec.nibh@mauriserateget.edu", "0800 181 5795"],
["Ocean W. Curtis", "Manager", "Eu Ltd", "6868", "08/24/2017", "cursus.et@cursus.edu", "(016977) 9585"],
["Kato F. Tucker", "Manager", "Vel Lectus Limited", "4713", "11/06/2017", "Duis@Lorem.edu", "070 0981 8503"],
["Robin J. Wise", "Manager", "Curabitur Dictum PC", "3285", "02/09/2017", "blandit@montesnascetur.edu", "0800 259158"],
["Uriel H. Guerrero", "Assistant", "Mauris Inc.", "2294", "02/11/2018", "vitae@Innecorci.net", "0500 948772"],
["Yasir W. Benson", "Assistant", "At Incorporated", "3897", "01/13/2017", "ornare.elit.elit@atortor.edu", "0391 916 3600"],
["Shafira U. French", "Assistant", "Nisi Magna Incorporated", "5116", "07/23/2016", "metus.In.nec@bibendum.ca", "(018013) 26699"],
["Casey E. Hood", "Assistant", "Lorem Vitae Odio Consulting", "7079", "05/05/2017", "justo.Praesent@sitamet.ca", "0800 570796"],
["Caleb X. Finch", "Assistant", "Elit Associates", "3629", "09/19/2016", "condimentum@eleifend.com", "056 1551 7431"]
]
}
document.body.appendChild(table)
window.dt = new window.simpleDatatables.DataTable(table, {
data,
columns: [
{
select: 4,
type: "date",
format: "MM/DD/YYYY"
}
]
})
const sel = document.getElementById("column")
data.headings.forEach((heading, index) => {
const opt = document.createElement("option")
opt.text = `${index} - ${heading}`
opt.value = `${index}`
sel.options.add(opt)
})
document.getElementById("update").addEventListener("click", _event => {
const find = document.getElementById("find").value.trim()
if (!find) {
alert("Nothing to find")
return
}
const colIndex = document.getElementById("column").selectedIndex
// find first row where string occurs in column
const rows = window.dt.rows
const {
index,
cols
} = rows.findRow(colIndex, find)
if (index < 0) {
alert(`Could not find "${find}" within column ${colIndex}`)
return
}
// replace row data
cols[colIndex] = document.getElementById("replace").value.trim()
// update row in data table
rows.updateRow(index, cols)
})
</script>
</body>
</html>