simple-datatables
Version:
A lightweight, dependency-free JavaScript HTML table plugin.
65 lines (61 loc) • 3.5 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>Filters - 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>Filters</h2>
<!-- The table in this demo is generated programmatically. See below for more details. -->
<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: 1,
filter: ["Assistant", "Manager"]
},
{
select: 4,
type: "date",
format: "MM/DD/YYYY"
}
]
})
</script>
</body>
</html>