xxxxxxxxxx1
<div class="form-outline mb-4">2
<input type="text" class="form-control" id="datatable-search-input" />3
<label class="form-label" for="datatable-search-input">Search</label>4
</div>5
<div class="datatable" id='datatable'>6
<table>7
<thead>8
<tr>9
<th class="th-sm">Name</th>10
<th class="th-sm">Position</th>11
<th class="th-sm">Office</th>12
<th class="th-sm">Age</th>13
<th class="th-sm">Start date</th>14
<th class="th-sm">Salary</th>15
</tr>16
</thead>17
<tbody>18
<tr>19
<td>Tiger Nixon</td>20
<td>System Architect</td>21
<td>Edinburgh</td>22
<td>61</td>23
<td>2011/04/25</td>24
<td>$320,800</td>25
</tr>26
27
<tr>28
<td>Sonya Frost</td>29
<td>Software Engineer</td>30
<td>Edinburgh</td>31
<td>23</td>32
<td>2008/12/13</td>33
<td>$103,600</td>34
</tr>35
<tr>36
<td>Jena Gaines</td>37
<td>Office Manager</td>38
<td>London</td>39
<td>30</td>40
<td>2008/12/19</td>41
<td>$90,560</td>42
</tr>43
<tr>44
<td>Quinn Flynn</td>45
<td>Support Lead</td>46
<td>Edinburgh</td>47
<td>22</td>48
<td>2013/03/03</td>49
<td>$342,000</td>50
</tr>51
<tr>52
<td>Charde Marshall</td>53
<td>Regional Director</td>54
<td>San Francisco</td>55
<td>36</td>56
<td>2008/10/16</td>57
<td>$470,600</td>58
</tr>59
<tr>60
<td>Haley Kennedy</td>61
<td>Senior Marketing Designer</td>62
<td>London</td>63
<td>43</td>64
<td>2012/12/18</td>65
<td>$313,500</td>66
</tr>67
<tr>68
<td>Tatyana Fitzpatrick</td>69
<td>Regional Director</td>70
<td>London</td>71
<td>19</td>72
<td>2010/03/17</td>73
<td>$385,750</td>74
</tr>75
<tr>76
<td>Michael Silva</td>77
<td>Marketing Designer</td>78
<td>London</td>79
<td>66</td>80
<td>2012/11/27</td>81
<td>$198,500</td>82
</tr>83
<tr>84
<td>Paul Byrd</td>85
<td>Chief Financial Officer (CFO)</td>86
<td>New York</td>87
<td>64</td>88
<td>2010/06/09</td>89
<td>$725,000</td>90
</tr>91
<tr>92
<td>Gloria Little</td>93
<td>Systems Administrator</td>94
<td>New York</td>95
<td>59</td>96
<td>2009/04/10</td>97
<td>$237,500</td>98
</tr>99
<tr>100
<td>Tiger Nixon</td>101
<td>System Architect</td>102
<td>Edinburgh</td>103
<td>61</td>104
<td>2011/04/25</td>105
<td>$320,800</td>106
</tr>107
108
<tr>109
<td>Sonya Frost</td>110
<td>Software Engineer</td>111
<td>Edinburgh</td>112
<td>23</td>113
<td>2008/12/13</td>114
<td>$103,600</td>115
</tr>116
<tr>117
<td>Jena Gaines</td>118
<td>Office Manager</td>119
<td>London</td>120
<td>30</td>121
<td>2008/12/19</td>122
<td>$90,560</td>123
</tr>124
<tr>125
<td>Quinn Flynn</td>126
<td>Support Lead</td>127
<td>Edinburgh</td>128
<td>22</td>129
<td>2013/03/03</td>130
<td>$342,000</td>131
</tr>132
<tr>133
<td>Charde Marshall</td>134
<td>Regional Director</td>135
<td>San Francisco</td>136
<td>36</td>137
<td>2008/10/16</td>138
<td>$470,600</td>139
</tr>140
<tr>141
<td>Haley Kennedy</td>142
<td>Senior Marketing Designer</td>143
<td>London</td>144
<td>43</td>145
<td>2012/12/18</td>146
<td>$313,500</td>147
</tr>148
<tr>149
<td>Tatyana Fitzpatrick</td>150
<td>Regional Director</td>151
<td>London</td>152
<td>19</td>153
<td>2010/03/17</td>154
<td>$385,750</td>155
</tr>156
<tr>157
<td>Michael Silva</td>158
<td>Marketing Designer</td>159
<td>London</td>160
<td>66</td>161
<td>2012/11/27</td>162
<td>$198,500</td>163
</tr>164
<tr>165
<td>Paul Byrd</td>166
<td>Chief Financial Officer (CFO)</td>167
<td>New York</td>168
<td>64</td>169
<td>2010/06/09</td>170
<td>$725,000</td>171
</tr>172
<tr>173
<td>Gloria Little</td>174
<td>Systems Administrator</td>175
<td>New York</td>176
<td>59</td>177
<td>2009/04/10</td>178
<td>$237,500</td>179
</tr>180
<tr>181
<td>Tiger Nixon</td>182
<td>System Architect</td>183
<td>Edinburgh</td>184
<td>61</td>185
<td>2011/04/25</td>186
<td>$320,800</td>187
</tr>188
189
<tr>190
<td>Sonya Frost</td>191
<td>Software Engineer</td>192
<td>Edinburgh</td>193
<td>23</td>194
<td>2008/12/13</td>195
<td>$103,600</td>196
</tr>197
<tr>198
<td>Jena Gaines</td>199
<td>Office Manager</td>200
<td>London</td>201
<td>30</td>202
<td>2008/12/19</td>203
<td>$90,560</td>204
</tr>205
<tr>206
<td>Quinn Flynn</td>207
<td>Support Lead</td>208
<td>Edinburgh</td>209
<td>22</td>210
<td>2013/03/03</td>211
<td>$342,000</td>212
</tr>213
<tr>214
<td>Charde Marshall</td>215
<td>Regional Director</td>216
<td>San Francisco</td>217
<td>36</td>218
<td>2008/10/16</td>219
<td>$470,600</td>220
</tr>221
<tr>222
<td>Haley Kennedy</td>223
<td>Senior Marketing Designer</td>224
<td>London</td>225
<td>43</td>226
<td>2012/12/18</td>227
<td>$313,500</td>228
</tr>229
<tr>230
<td>Tatyana Fitzpatrick</td>231
<td>Regional Director</td>232
<td>London</td>233
<td>19</td>234
<td>2010/03/17</td>235
<td>$385,750</td>236
</tr>237
<tr>238
<td>Michael Silva</td>239
<td>Marketing Designer</td>240
<td>London</td>241
<td>66</td>242
<td>2012/11/27</td>243
<td>$198,500</td>244
</tr>245
<tr>246
<td>Paul Byrd</td>247
<td>Chief Financial Officer (CFO)</td>248
<td>New York</td>249
<td>64</td>250
<td>2010/06/09</td>251
<td>$725,000</td>252
</tr>253
<tr>254
<td>Gloria Little</td>255
<td>Systems Administrator</td>256
<td>New York</td>257
<td>59</td>258
<td>2009/04/10</td>259
<td>$237,500</td>260
</tr>261
<tr>262
<td>Tiger Nixon</td>263
<td>System Architect</td>264
<td>Edinburgh</td>265
<td>61</td>266
<td>2011/04/25</td>267
<td>$320,800</td>268
</tr>269
270
<tr>271
<td>Sonya Frost</td>272
<td>Software Engineer</td>273
<td>Edinburgh</td>274
<td>23</td>275
<td>2008/12/13</td>276
<td>$103,600</td>277
</tr>278
<tr>279
<td>Jena Gaines</td>280
<td>Office Manager</td>281
<td>London</td>282
<td>30</td>283
<td>2008/12/19</td>284
<td>$90,560</td>285
</tr>286
<tr>287
<td>Quinn Flynn</td>288
<td>Support Lead</td>289
<td>Edinburgh</td>290
<td>22</td>291
<td>2013/03/03</td>292
<td>$342,000</td>293
</tr>294
<tr>295
<td>Charde Marshall</td>296
<td>Regional Director</td>297
<td>San Francisco</td>298
<td>36</td>299
<td>2008/10/16</td>300
<td>$470,600</td>301
</tr>302
<tr>303
<td>Haley Kennedy</td>304
<td>Senior Marketing Designer</td>305
<td>London</td>306
<td>43</td>307
<td>2012/12/18</td>308
<td>$313,500</td>309
</tr>310
<tr>311
<td>Tatyana Fitzpatrick</td>312
<td>Regional Director</td>313
<td>London</td>314
<td>19</td>315
<td>2010/03/17</td>316
<td>$385,750</td>317
</tr>318
<tr>319
<td>Michael Silva</td>320
<td>Marketing Designer</td>321
<td>London</td>322
<td>66</td>323
<td>2012/11/27</td>324
<td>$198,500</td>325
</tr>326
<tr>327
<td>Paul Byrd</td>328
<td>Chief Financial Officer (CFO)</td>329
<td>New York</td>330
<td>64</td>331
<td>2010/06/09</td>332
<td>$725,000</td>333
</tr>334
<tr>335
<td>Gloria Little</td>336
<td>Systems Administrator</td>337
<td>New York</td>338
<td>59</td>339
<td>2009/04/10</td>340
<td>$237,500</td>341
</tr>342
</tbody>343
</table>344
</div>1
1
xxxxxxxxxx1
const instance = mdb.Datatable.getInstance(document.getElementById('datatable'))2
3
document.getElementById('datatable-search-input').addEventListener('input', (e) => {4
instance.search(e.target.value);5
}); Console errors: 0