xxxxxxxxxx1
<div class="form-outline mb-4">2
<input3
type="text"4
class="form-control"5
id="datatable-search-input"6
/>7
<label class="form-label" for="datatable-search-input">Search</label>8
</div>9
<div id="datatable" class="datatable">10
<table>11
<thead>12
<tr>13
<th class="th-sm">Name</th>14
<th class="th-sm">Position</th>15
<th class="th-sm">Office</th>16
<th class="th-sm">Age</th>17
<th class="th-sm">Start date</th>18
<th class="th-sm">Salary</th>19
</tr>20
</thead>21
<tbody>22
<tr>23
<td>Tiger Nixon</td>24
<td>System Architect</td>25
<td>Edinburgh</td>26
<td>61</td>27
<td>2011/04/25</td>28
<td>$320,800</td>29
</tr>30
31
<tr>32
<td>Sonya Frost</td>33
<td>Software Engineer</td>34
<td>Edinburgh</td>35
<td>23</td>36
<td>2008/12/13</td>37
<td>$103,600</td>38
</tr>39
<tr>40
<td>Jena Gaines</td>41
<td>Office Manager</td>42
<td>London</td>43
<td>30</td>44
<td>2008/12/19</td>45
<td>$90,560</td>46
</tr>47
<tr>48
<td>Quinn Flynn</td>49
<td>Support Lead</td>50
<td>Edinburgh</td>51
<td>22</td>52
<td>2013/03/03</td>53
<td>$342,000</td>54
</tr>55
<tr>56
<td>Charde Marshall</td>57
<td>Regional Director</td>58
<td>San Francisco</td>59
<td>36</td>60
<td>2008/10/16</td>61
<td>$470,600</td>62
</tr>63
<tr>64
<td>Haley Kennedy</td>65
<td>Senior Marketing Designer</td>66
<td>London</td>67
<td>43</td>68
<td>2012/12/18</td>69
<td>$313,500</td>70
</tr>71
<tr>72
<td>Tatyana Fitzpatrick</td>73
<td>Regional Director</td>74
<td>London</td>75
<td>19</td>76
<td>2010/03/17</td>77
<td>$385,750</td>78
</tr>79
<tr>80
<td>Michael Silva</td>81
<td>Marketing Designer</td>82
<td>London</td>83
<td>66</td>84
<td>2012/11/27</td>85
<td>$198,500</td>86
</tr>87
<tr>88
<td>Paul Byrd</td>89
<td>Chief Financial Officer (CFO)</td>90
<td>New York</td>91
<td>64</td>92
<td>2010/06/09</td>93
<td>$725,000</td>94
</tr>95
<tr>96
<td>Gloria Little</td>97
<td>Systems Administrator</td>98
<td>New York</td>99
<td>59</td>100
<td>2009/04/10</td>101
<td>$237,500</td>102
</tr>103
</tbody>104
</table>105
</div>1
1
xxxxxxxxxx1
const data = {2
columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],3
rows: [4
['Tiger Nixon', 'System Architect', ' Edinburgh', 61, '2011/04/25', '$320,800'],5
['Sonya Frost', 'Software Engineer', 'Edinburgh', 23, '2008/12/13', '$103,600'],6
['Jena Gaines', 'Office Manager', 'London', 30, '2008/12/19', '$90,560'],7
['Quinn Flynn', 'Support Lead', 'Edinburgh', 22, '2013/03/03', '$342,000'],8
['Charde Marshall', 'Regional Director', 'San Francisco', 36, '2008/10/16', '$470,600'],9
['Haley Kennedy', 'Senior Marketing Designer', 'London', 43, '2012/12/18', '$313,500'],10
['Tatyana Fitzpatrick', 'Regional Director', 'London', 19, '2010/03/17', '$385,750'],11
['Michael Silva', 'Marketing Designer', 'London', 66, '2012/11/27', '$198,500'],12
['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 64, '2010/06/09', '$725,000'],13
['Gloria Little', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],14
],15
};16
17
const searchInstance = new mdb.Datatable(document.getElementById('datatable'), data)18
19
document.getElementById('datatable-search-input').addEventListener('input', (e) => {20
searchInstance.search(e.target.value);21
}); Console errors: 0