xxxxxxxxxx
1
<div class="container">
2
<a id="btnAddUser" class="btn btn-outline-primary btn-sm" data-mdb-toggle="modal" data-mdb-target="#AddUserModal"><i class="fa fa-plus-circle"></i>Add user</a>
3
<div class="form-outline mb-4">
4
5
<input type="text"
6
class="form-control"
7
id="datatable-search-input" />
8
<label class="form-label" for="datatable-search-input">Search</label>
9
</div>
10
<div id="datatable">
11
12
</div>
1
1
xxxxxxxxxx
1
2
const data = {
3
columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
4
rows: [
5
['Tiger Nixon', 'System Architect', ' Edinburgh', 61, '2011/04/25', '$320,800'],
6
['Sonya Frost', 'Software Engineer', 'Edinburgh', 23, '2008/12/13', '$103,600'],
7
['Jena Gaines', 'Office Manager', 'London', 30, '2008/12/19', '$90,560'],
8
['Quinn Flynn', 'Support Lead', 'Edinburgh', 22, '2013/03/03', '$342,000'],
9
['Charde Marshall', 'Regional Director', 'San Francisco', 36, '2008/10/16', '$470,600'],
10
['Haley Kennedy', 'Senior Marketing Designer', 'London', 43, '2012/12/18', '$313,500'],
11
['Tatyana Fitzpatrick', 'Regional Director', 'London', 19, '2010/03/17', '$385,750'],
12
['Michael Silva', 'Marketing Designer', 'London', 66, '2012/11/27', '$198,500'],
13
['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 64, '2010/06/09', '$725,000'],
14
['Gloria Little', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],
15
],
16
};
17
18
19
// you can use any data as object containing columns and rows keys
20
const searchInstance = new mdb.Datatable(document.getElementById('datatable'), data)
21
22
document.getElementById('datatable-search-input').addEventListener('input', (e) => {
23
searchInstance.search(e.target.value);
24
});
Console errors: 0