xxxxxxxxxx1
<div class="container my-4">2
3
<p class="font-weight-bold">An example of bootstrap table powered by javascript. Easy to implement and customize. Examples of basic and advanced usage.</p>4
5
<p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/jquery/tables/datatables/"6
target="_blank">Bootstrap Datatables Docs</a> </p>7
8
9
<hr class="mt-5">10
11
<p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>12
13
<a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>14
<a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>15
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>16
<a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>17
18
<hr class="mb-5">19
20
<p class="font-weight-bold">Basic example</p>21
22
<table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">23
<thead>24
<tr>25
<th class="th-sm">Name26
27
</th>28
<th class="th-sm">Position29
30
</th>31
<th class="th-sm">Office32
33
</th>34
<th class="th-sm">Age35
36
</th>37
<th class="th-sm">Start date38
39
</th>40
<th class="th-sm">Salary41
42
</th>43
</tr>44
</thead>45
<tbody>46
<tr>47
<td>Tiger Nixon</td>48
<td>System Architect</td>49
<td>Edinburgh</td>50
<td>61</td>51
<td>2011/04/25</td>52
<td>$320,800</td>53
</tr>54
<tr>55
<td>Garrett Winters</td>56
<td>Accountant</td>57
<td>Tokyo</td>58
<td>63</td>59
<td>2011/07/25</td>60
<td>$170,750</td>61
</tr>62
<tr>63
<td>Ashton Cox</td>64
<td>Junior Technical Author</td>65
<td>San Francisco</td>66
<td>66</td>67
<td>2009/01/12</td>68
<td>$86,000</td>69
</tr>70
<tr>71
<td>Cedric Kelly</td>72
<td>Senior Javascript Developer</td>73
<td>Edinburgh</td>74
<td>22</td>75
<td>2012/03/29</td>76
<td>$433,060</td>77
</tr>78
<tr>79
<td>Airi Satou</td>80
<td>Accountant</td>81
<td>Tokyo</td>82
<td>33</td>83
<td>2008/11/28</td>84
<td>$162,700</td>85
</tr>86
<tr>87
<td>Brielle Williamson</td>88
<td>Integration Specialist</td>89
<td>New York</td>90
<td>61</td>91
<td>2012/12/02</td>92
<td>$372,000</td>93
</tr>94
<tr>95
<td>Herrod Chandler</td>96
<td>Sales Assistant</td>97
<td>San Francisco</td>98
<td>59</td>99
<td>2012/08/06</td>100
<td>$137,500</td>101
</tr>102
<tr>103
<td>Rhona Davidson</td>104
<td>Integration Specialist</td>105
<td>Tokyo</td>106
<td>55</td>107
<td>2010/10/14</td>108
<td>$327,900</td>109
</tr>110
<tr>111
<td>Colleen Hurst</td>112
<td>Javascript Developer</td>113
<td>San Francisco</td>114
<td>39</td>115
<td>2009/09/15</td>116
<td>$205,500</td>117
</tr>118
<tr>119
<td>Sonya Frost</td>120
<td>Software Engineer</td>121
<td>Edinburgh</td>122
<td>23</td>123
<td>2008/12/13</td>124
<td>$103,600</td>125
</tr>126
<tr>127
<td>Jena Gaines</td>128
<td>Office Manager</td>129
<td>London</td>130
<td>30</td>131
<td>2008/12/19</td>132
<td>$90,560</td>133
</tr>134
<tr>135
<td>Quinn Flynn</td>136
<td>Support Lead</td>137
<td>Edinburgh</td>138
<td>22</td>139
<td>2013/03/03</td>140
<td>$342,000</td>141
</tr>142
<tr>143
<td>Charde Marshall</td>144
<td>Regional Director</td>145
<td>San Francisco</td>146
<td>36</td>147
<td>2008/10/16</td>148
<td>$470,600</td>149
</tr>150
<tr>151
<td>Haley Kennedy</td>152
<td>Senior Marketing Designer</td>153
<td>London</td>154
<td>43</td>155
<td>2012/12/18</td>156
<td>$313,500</td>157
</tr>158
<tr>159
<td>Tatyana Fitzpatrick</td>160
<td>Regional Director</td>161
<td>London</td>162
<td>19</td>163
<td>2010/03/17</td>164
<td>$385,750</td>165
</tr>166
<tr>167
<td>Michael Silva</td>168
<td>Marketing Designer</td>169
<td>London</td>170
<td>66</td>171
<td>2012/11/27</td>172
<td>$198,500</td>173
</tr>174
<tr>175
<td>Paul Byrd</td>176
<td>Chief Financial Officer (CFO)</td>177
<td>New York</td>178
<td>64</td>179
<td>2010/06/09</td>180
<td>$725,000</td>181
</tr>182
<tr>183
<td>Gloria Little</td>184
<td>Systems Administrator</td>185
<td>New York</td>186
<td>59</td>187
<td>2009/04/10</td>188
<td>$237,500</td>189
</tr>190
<tr>191
<td>Bradley Greer</td>192
<td>Software Engineer</td>193
<td>London</td>194
<td>41</td>195
<td>2012/10/13</td>196
<td>$132,000</td>197
</tr>198
<tr>199
<td>Dai Rios</td>200
<td>Personnel Lead</td>201
<td>Edinburgh</td>202
<td>35</td>203
<td>2012/09/26</td>204
<td>$217,500</td>205
</tr>206
<tr>207
<td>Jenette Caldwell</td>208
<td>Development Lead</td>209
<td>New York</td>210
<td>30</td>211
<td>2011/09/03</td>212
<td>$345,000</td>213
</tr>214
<tr>215
<td>Yuri Berry</td>216
<td>Chief Marketing Officer (CMO)</td>217
<td>New York</td>218
<td>40</td>219
<td>2009/06/25</td>220
<td>$675,000</td>221
</tr>222
<tr>223
<td>Caesar Vance</td>224
<td>Pre-Sales Support</td>225
<td>New York</td>226
<td>21</td>227
<td>2011/12/12</td>228
<td>$106,450</td>229
</tr>230
<tr>231
<td>Doris Wilder</td>232
<td>Sales Assistant</td>233
<td>Sidney</td>234
<td>23</td>235
<td>2010/09/20</td>236
<td>$85,600</td>237
</tr>238
<tr>239
<td>Angelica Ramos</td>240
<td>Chief Executive Officer (CEO)</td>241
<td>London</td>242
<td>47</td>243
<td>2009/10/09</td>244
<td>$1,200,000</td>245
</tr>246
<tr>247
<td>Gavin Joyce</td>248
<td>Developer</td>249
<td>Edinburgh</td>250
<td>42</td>251
<td>2010/12/22</td>252
<td>$92,575</td>253
</tr>254
<tr>255
<td>Jennifer Chang</td>256
<td>Regional Director</td>257
<td>Singapore</td>258
<td>28</td>259
<td>2010/11/14</td>260
<td>$357,650</td>261
</tr>262
<tr>263
<td>Brenden Wagner</td>264
<td>Software Engineer</td>265
<td>San Francisco</td>266
<td>28</td>267
<td>2011/06/07</td>268
<td>$206,850</td>269
</tr>270
<tr>271
<td>Fiona Green</td>272
<td>Chief Operating Officer (COO)</td>273
<td>San Francisco</td>274
<td>48</td>275
<td>2010/03/11</td>276
<td>$850,000</td>277
</tr>278
<tr>279
<td>Shou Itou</td>280
<td>Regional Marketing</td>281
<td>Tokyo</td>282
<td>20</td>283
<td>2011/08/14</td>284
<td>$163,000</td>285
</tr>286
<tr>287
<td>Michelle House</td>288
<td>Integration Specialist</td>289
<td>Sidney</td>290
<td>37</td>291
<td>2011/06/02</td>292
<td>$95,400</td>293
</tr>294
<tr>295
<td>Suki Burks</td>296
<td>Developer</td>297
<td>London</td>298
<td>53</td>299
<td>2009/10/22</td>300
<td>$114,500</td>301
</tr>302
<tr>303
<td>Prescott Bartlett</td>304
<td>Technical Author</td>305
<td>London</td>306
<td>27</td>307
<td>2011/05/07</td>308
<td>$145,000</td>309
</tr>310
<tr>311
<td>Gavin Cortez</td>312
<td>Team Leader</td>313
<td>San Francisco</td>314
<td>22</td>315
<td>2008/10/26</td>316
<td>$235,500</td>317
</tr>318
<tr>319
<td>Martena Mccray</td>320
<td>Post-Sales support</td>321
<td>Edinburgh</td>322
<td>46</td>323
<td>2011/03/09</td>324
<td>$324,050</td>325
</tr>326
<tr>327
<td>Unity Butler</td>328
<td>Marketing Designer</td>329
<td>San Francisco</td>330
<td>47</td>331
<td>2009/12/09</td>332
<td>$85,675</td>333
</tr>334
<tr>335
<td>Howard Hatfield</td>336
<td>Office Manager</td>337
<td>San Francisco</td>338
<td>51</td>339
<td>2008/12/16</td>340
<td>$164,500</td>341
</tr>342
<tr>343
<td>Hope Fuentes</td>344
<td>Secretary</td>345
<td>San Francisco</td>346
<td>41</td>347
<td>2010/02/12</td>348
<td>$109,850</td>349
</tr>350
<tr>351
<td>Vivian Harrell</td>352
<td>Financial Controller</td>353
<td>San Francisco</td>354
<td>62</td>355
<td>2009/02/14</td>356
<td>$452,500</td>357
</tr>358
<tr>359
<td>Timothy Mooney</td>360
<td>Office Manager</td>361
<td>London</td>362
<td>37</td>363
<td>2008/12/11</td>364
<td>$136,200</td>365
</tr>366
<tr>367
<td>Jackson Bradshaw</td>368
<td>Director</td>369
<td>New York</td>370
<td>65</td>371
<td>2008/09/26</td>372
<td>$645,750</td>373
</tr>374
<tr>375
<td>Olivia Liang</td>376
<td>Support Engineer</td>377
<td>Singapore</td>378
<td>64</td>379
<td>2011/02/03</td>380
<td>$234,500</td>381
</tr>382
<tr>383
<td>Bruno Nash</td>384
<td>Software Engineer</td>385
<td>London</td>386
<td>38</td>387
<td>2011/05/03</td>388
<td>$163,500</td>389
</tr>390
<tr>391
<td>Sakura Yamamoto</td>392
<td>Support Engineer</td>393
<td>Tokyo</td>394
<td>37</td>395
<td>2009/08/19</td>396
<td>$139,575</td>397
</tr>398
<tr>399
<td>Thor Walton</td>400
<td>Developer</td>401
<td>New York</td>402
<td>61</td>403
<td>2013/08/11</td>404
<td>$98,540</td>405
</tr>406
<tr>407
<td>Finn Camacho</td>408
<td>Support Engineer</td>409
<td>San Francisco</td>410
<td>47</td>411
<td>2009/07/07</td>412
<td>$87,500</td>413
</tr>414
<tr>415
<td>Serge Baldwin</td>416
<td>Data Coordinator</td>417
<td>Singapore</td>418
<td>64</td>419
<td>2012/04/09</td>420
<td>$138,575</td>421
</tr>422
<tr>423
<td>Zenaida Frank</td>424
<td>Software Engineer</td>425
<td>New York</td>426
<td>63</td>427
<td>2010/01/04</td>428
<td>$125,250</td>429
</tr>430
<tr>431
<td>Zorita Serrano</td>432
<td>Software Engineer</td>433
<td>San Francisco</td>434
<td>56</td>435
<td>2012/06/01</td>436
<td>$115,000</td>437
</tr>438
<tr>439
<td>Jennifer Acosta</td>440
<td>Junior Javascript Developer</td>441
<td>Edinburgh</td>442
<td>43</td>443
<td>2013/02/01</td>444
<td>$75,650</td>445
</tr>446
<tr>447
<td>Cara Stevens</td>448
<td>Sales Assistant</td>449
<td>New York</td>450
<td>46</td>451
<td>2011/12/06</td>452
<td>$145,600</td>453
</tr>454
<tr>455
<td>Hermione Butler</td>456
<td>Regional Director</td>457
<td>London</td>458
<td>47</td>459
<td>2011/03/21</td>460
<td>$356,250</td>461
</tr>462
<tr>463
<td>Lael Greer</td>464
<td>Systems Administrator</td>465
<td>London</td>466
<td>21</td>467
<td>2009/02/27</td>468
<td>$103,500</td>469
</tr>470
<tr>471
<td>Jonas Alexander</td>472
<td>Developer</td>473
<td>San Francisco</td>474
<td>30</td>475
<td>2010/07/14</td>476
<td>$86,500</td>477
</tr>478
<tr>479
<td>Shad Decker</td>480
<td>Regional Director</td>481
<td>Edinburgh</td>482
<td>51</td>483
<td>2008/11/13</td>484
<td>$183,000</td>485
</tr>486
<tr>487
<td>Michael Bruce</td>488
<td>Javascript Developer</td>489
<td>Singapore</td>490
<td>29</td>491
<td>2011/06/27</td>492
<td>$183,000</td>493
</tr>494
<tr>495
<td>Donna Snider</td>496
<td>Customer Support</td>497
<td>New York</td>498
<td>27</td>499
<td>2011/01/25</td>500
<td>$112,000</td>501
</tr>502
</tbody>503
<tfoot>504
<tr>505
<th>Name506
</th>507
<th>Position508
</th>509
<th>Office510
</th>511
<th>Age512
</th>513
<th>Start date514
</th>515
<th>Salary516
</th>517
</tr>518
</tfoot>519
</table>520
521
</div>1
1
xxxxxxxxxx1
$(document).ready(function () {2
$('#dtBasicExample').DataTable();3
$('.dataTables_length').addClass('bs-select');4
}); Console errors: 0