xxxxxxxxxx1
<div class="wrapper-editor">2
3
<div class="block my-4">4
<div class="d-flex justify-content-center">5
<p class="h5 text-primary createShowP">0 row selected</p>6
</div>7
</div>8
9
<div class="row d-flex justify-content-center modalWrapper">10
<div class="modal fade addNewInputs" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="modalAdd"11
aria-hidden="true">12
<div class="modal-dialog" role="document">13
<div class="modal-content">14
<div class="modal-header text-center">15
<h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Add new form</h4>16
<button type="button" class="close text-primary" data-dismiss="modal" aria-label="Close">17
<span aria-hidden="true">×</span>18
</button>19
</div>20
<div class="modal-body mx-3">21
<div class="md-form mb-5">22
<input type="text" id="inputName" class="form-control validate">23
<label data-error="wrong" data-success="right" for="inputName">Name</label>24
</div>25
26
<div class="md-form mb-5">27
<input type="text" id="inputPosition" class="form-control validate">28
<label data-error="wrong" data-success="right" for="inputPosition">Position</label>29
</div>30
31
<div class="md-form mb-5">32
<input type="text" id="inputOfficeInput" class="form-control validate">33
<label data-error="wrong" data-success="right" for="inputOfficeInput">Office</label>34
</div>35
36
<div class="md-form mb-5">37
<input type="text" id="inputAge" class="form-control validate">38
<label data-error="wrong" data-success="right" for="inputAge">Age</label>39
</div>40
41
<div class="md-form mb-5">42
<input type="date" id="inputDate" class="form-control" placeholder="Select Date">43
<label data-error="wrong" data-success="right" for="inputDate"></label>44
</div>45
46
<div class="md-form mb-5">47
<input type="text" id="inputSalary" class="form-control validate">48
<label data-error="wrong" data-success="right" for="inputSalary">Salary</label>49
</div>50
51
</div>52
<div class="modal-footer d-flex justify-content-center buttonAddFormWrapper">53
<button class="btn btn-outline-primary btn-block buttonAdd" data-dismiss="modal">Add form54
<i class="fas fa-paper-plane-o ml-1"></i>55
</button>56
</div>57
</div>58
</div>59
</div>60
61
<!-- BUTTON ADD STYLE -->62
<div class="text-center">63
<a href="" class="btn btn-info btn-rounded btn-sm" data-toggle="modal" data-target="#modalAdd">Add<i64
class="fas fa-plus-square ml-1"></i></a>65
</div>66
67
<div class="modal fade modalEditClass" id="modalEdit" tabindex="-1" role="dialog" aria-hidden="true">68
<div class="modal-dialog" role="document">69
<div class="modal-content">70
<div class="modal-header text-center">71
<h4 class="modal-title w-100 font-weight-bold text-secondary ml-5">Edit form</h4>72
<button type="button" class="close text-secondary" data-dismiss="modal" aria-label="Close">73
<span aria-hidden="true">×</span>74
</button>75
</div>76
<div class="modal-body mx-3">77
<div class="md-form mb-5">78
<input type="text" id="formNameEdit" class="form-control validate">79
<label data-error="wrong" data-success="right" for="formNameEdit">Name</label>80
</div>81
82
<div class="md-form mb-5">83
<input type="text" id="formPositionEdit" class="form-control validate">84
<label data-error="wrong" data-success="right" for="formPositionEdit">Position</label>85
</div>86
87
<div class="md-form mb-5">88
<input type="text" id="formOfficeEdit" class="form-control validate">89
<label data-error="wrong" data-success="right" for="formOfficeEdit">Office</label>90
</div>91
92
<div class="md-form mb-5">93
<input type="text" id="formAgeEdit" class="form-control validate">94
<label data-error="wrong" data-success="right" for="formAgeEdit">Age</label>95
</div>96
97
<div class="md-form mb-5">98
<input type="text" id="formDateEdit" class="form-control datepicker">99
<label data-error="wrong" data-success="right" for="formDateEdit">Date</label>100
</div>101
102
<div class="md-form mb-5">103
<input type="text" id="formSalaryEdit" class="form-control validate">104
<label data-error="wrong" data-success="right" for="formSalaryEdit">Salary</label>105
</div>106
107
108
</div>109
<div class="modal-footer d-flex justify-content-center editInsideWrapper">110
<button class="btn btn-outline-secondary btn-block editInside" data-dismiss="modal">Edit111
form112
<i class="fas fa-paper-plane-o ml-1"></i>113
</button>114
</div>115
</div>116
</div>117
</div>118
119
<!-- BUTTON EDIT STYLE -->120
<div class="text-center buttonEditWrapper">121
<button class="btn btn-info btn-rounded btn-sm buttonEdit" data-toggle="modal" data-target="#modalEdit"122
disabled>Edit<i class="fas fa-pencil-square-o ml-1"></i></a>123
</div>124
125
<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="modalDelete"126
aria-hidden="true">127
<div class="modal-dialog" role="document">128
<div class="modal-content">129
<div class="modal-header text-center">130
<h4 class="modal-title w-100 font-weight-bold ml-5 text-danger">Delete</h4>131
<button type="button" class="close text-danger" data-dismiss="modal" aria-label="Close">132
<span aria-hidden="true">×</span>133
</button>134
</div>135
<div class="modal-body mx-3">136
<p class="text-center h4">Are you sure to delete selected row?</p>137
138
</div>139
<div class="modal-footer d-flex justify-content-center deleteButtonsWrapper">140
<button type="button" class="btn btn-danger btnYesClass" id="btnYes" data-dismiss="modal">Yes</button>141
<button type="button" class="btn btn-primary btnNoClass" id="btnNo" data-dismiss="modal">No</button>142
</div>143
</div>144
</div>145
</div>146
147
<!-- BUTTON DELETE STYLE -->148
<div class="text-center">149
<button class="btn btn-danger btn-sm btn-rounded buttonDelete" data-toggle="modal" disabled data-target="#modalDelete"150
disabled>Delete<i class="fas fa-times ml-1"></i></a>151
</div>152
</div>153
154
<table id="dtBasicExample" class="table table-striped table-bordered" cellspacing="0" width="100%">155
<thead>156
<tr>157
<th class="th-sm">Name158
159
</th>160
<th class="th-sm">Position161
162
</th>163
<th class="th-sm">Office164
165
</th>166
<th class="th-sm">Age167
168
</th>169
<th class="th-sm">Start date170
171
</th>172
<th class="th-sm">Salary173
174
</th>175
</tr>176
</thead>177
<tbody>178
<tr>179
<td>Tiger Nixon</td>180
<td>System Architect</td>181
<td>Edinburgh</td>182
<td>61</td>183
<td>2011/04/25</td>184
<td>$320,800</td>185
</tr>186
<tr>187
<td>Garrett Winters</td>188
<td>Accountant</td>189
<td>Tokyo</td>190
<td>63</td>191
<td>2011/07/25</td>192
<td>$170,750</td>193
</tr>194
<tr>195
<td>Ashton Cox</td>196
<td>Junior Technical Author</td>197
<td>San Francisco</td>198
<td>66</td>199
<td>2009/01/12</td>200
<td>$86,000</td>201
</tr>202
<tr>203
<td>Cedric Kelly</td>204
<td>Senior Javascript Developer</td>205
<td>Edinburgh</td>206
<td>22</td>207
<td>2012/03/29</td>208
<td>$433,060</td>209
</tr>210
<tr>211
<td>Airi Satou</td>212
<td>Accountant</td>213
<td>Tokyo</td>214
<td>33</td>215
<td>2008/11/28</td>216
<td>$162,700</td>217
</tr>218
<tr>219
<td>Brielle Williamson</td>220
<td>Integration Specialist</td>221
<td>New York</td>222
<td>61</td>223
<td>2012/12/02</td>224
<td>$372,000</td>225
</tr>226
<tr>227
<td>Herrod Chandler</td>228
<td>Sales Assistant</td>229
<td>San Francisco</td>230
<td>59</td>231
<td>2012/08/06</td>232
<td>$137,500</td>233
</tr>234
<tr>235
<td>Rhona Davidson</td>236
<td>Integration Specialist</td>237
<td>Tokyo</td>238
<td>55</td>239
<td>2010/10/14</td>240
<td>$327,900</td>241
</tr>242
<tr>243
<td>Colleen Hurst</td>244
<td>Javascript Developer</td>245
<td>San Francisco</td>246
<td>39</td>247
<td>2009/09/15</td>248
<td>$205,500</td>249
</tr>250
<tr>251
<td>Sonya Frost</td>252
<td>Software Engineer</td>253
<td>Edinburgh</td>254
<td>23</td>255
<td>2008/12/13</td>256
<td>$103,600</td>257
</tr>258
<tr>259
<td>Jena Gaines</td>260
<td>Office Manager</td>261
<td>London</td>262
<td>30</td>263
<td>2008/12/19</td>264
<td>$90,560</td>265
</tr>266
<tr>267
<td>Quinn Flynn</td>268
<td>Support Lead</td>269
<td>Edinburgh</td>270
<td>22</td>271
<td>2013/03/03</td>272
<td>$342,000</td>273
</tr>274
<tr>275
<td>Charde Marshall</td>276
<td>Regional Director</td>277
<td>San Francisco</td>278
<td>36</td>279
<td>2008/10/16</td>280
<td>$470,600</td>281
</tr>282
<tr>283
<td>Haley Kennedy</td>284
<td>Senior Marketing Designer</td>285
<td>London</td>286
<td>43</td>287
<td>2012/12/18</td>288
<td>$313,500</td>289
</tr>290
<tr>291
<td>Tatyana Fitzpatrick</td>292
<td>Regional Director</td>293
<td>London</td>294
<td>19</td>295
<td>2010/03/17</td>296
<td>$385,750</td>297
</tr>298
<tr>299
<td>Michael Silva</td>300
<td>Marketing Designer</td>301
<td>London</td>302
<td>66</td>303
<td>2012/11/27</td>304
<td>$198,500</td>305
</tr>306
<tr>307
<td>Paul Byrd</td>308
<td>Chief Financial Officer (CFO)</td>309
<td>New York</td>310
<td>64</td>311
<td>2010/06/09</td>312
<td>$725,000</td>313
</tr>314
<tr>315
<td>Gloria Little</td>316
<td>Systems Administrator</td>317
<td>New York</td>318
<td>59</td>319
<td>2009/04/10</td>320
<td>$237,500</td>321
</tr>322
<tr>323
<td>Bradley Greer</td>324
<td>Software Engineer</td>325
<td>London</td>326
<td>41</td>327
<td>2012/10/13</td>328
<td>$132,000</td>329
</tr>330
<tr>331
<td>Dai Rios</td>332
<td>Personnel Lead</td>333
<td>Edinburgh</td>334
<td>35</td>335
<td>2012/09/26</td>336
<td>$217,500</td>337
</tr>338
<tr>339
<td>Jenette Caldwell</td>340
<td>Development Lead</td>341
<td>New York</td>342
<td>30</td>343
<td>2011/09/03</td>344
<td>$345,000</td>345
</tr>346
<tr>347
<td>Yuri Berry</td>348
<td>Chief Marketing Officer (CMO)</td>349
<td>New York</td>350
<td>40</td>351
<td>2009/06/25</td>352
<td>$675,000</td>353
</tr>354
<tr>355
<td>Caesar Vance</td>356
<td>Pre-Sales Support</td>357
<td>New York</td>358
<td>21</td>359
<td>2011/12/12</td>360
<td>$106,450</td>361
</tr>362
<tr>363
<td>Doris Wilder</td>364
<td>Sales Assistant</td>365
<td>Sidney</td>366
<td>23</td>367
<td>2010/09/20</td>368
<td>$85,600</td>369
</tr>370
<tr>371
<td>Angelica Ramos</td>372
<td>Chief Executive Officer (CEO)</td>373
<td>London</td>374
<td>47</td>375
<td>2009/10/09</td>376
<td>$1,200,000</td>377
</tr>378
<tr>379
<td>Gavin Joyce</td>380
<td>Developer</td>381
<td>Edinburgh</td>382
<td>42</td>383
<td>2010/12/22</td>384
<td>$92,575</td>385
</tr>386
<tr>387
<td>Jennifer Chang</td>388
<td>Regional Director</td>389
<td>Singapore</td>390
<td>28</td>391
<td>2010/11/14</td>392
<td>$357,650</td>393
</tr>394
<tr>395
<td>Brenden Wagner</td>396
<td>Software Engineer</td>397
<td>San Francisco</td>398
<td>28</td>399
<td>2011/06/07</td>400
<td>$206,850</td>401
</tr>402
<tr>403
<td>Fiona Green</td>404
<td>Chief Operating Officer (COO)</td>405
<td>San Francisco</td>406
<td>48</td>407
<td>2010/03/11</td>408
<td>$850,000</td>409
</tr>410
<tr>411
<td>Shou Itou</td>412
<td>Regional Marketing</td>413
<td>Tokyo</td>414
<td>20</td>415
<td>2011/08/14</td>416
<td>$163,000</td>417
</tr>418
<tr>419
<td>Michelle House</td>420
<td>Integration Specialist</td>421
<td>Sidney</td>422
<td>37</td>423
<td>2011/06/02</td>424
<td>$95,400</td>425
</tr>426
<tr>427
<td>Suki Burks</td>428
<td>Developer</td>429
<td>London</td>430
<td>53</td>431
<td>2009/10/22</td>432
<td>$114,500</td>433
</tr>434
<tr>435
<td>Prescott Bartlett</td>436
<td>Technical Author</td>437
<td>London</td>438
<td>27</td>439
<td>2011/05/07</td>440
<td>$145,000</td>441
</tr>442
<tr>443
<td>Gavin Cortez</td>444
<td>Team Leader</td>445
<td>San Francisco</td>446
<td>22</td>447
<td>2008/10/26</td>448
<td>$235,500</td>449
</tr>450
<tr>451
<td>Martena Mccray</td>452
<td>Post-Sales support</td>453
<td>Edinburgh</td>454
<td>46</td>455
<td>2011/03/09</td>456
<td>$324,050</td>457
</tr>458
<tr>459
<td>Unity Butler</td>460
<td>Marketing Designer</td>461
<td>San Francisco</td>462
<td>47</td>463
<td>2009/12/09</td>464
<td>$85,675</td>465
</tr>466
<tr>467
<td>Howard Hatfield</td>468
<td>Office Manager</td>469
<td>San Francisco</td>470
<td>51</td>471
<td>2008/12/16</td>472
<td>$164,500</td>473
</tr>474
<tr>475
<td>Hope Fuentes</td>476
<td>Secretary</td>477
<td>San Francisco</td>478
<td>41</td>479
<td>2010/02/12</td>480
<td>$109,850</td>481
</tr>482
<tr>483
<td>Vivian Harrell</td>484
<td>Financial Controller</td>485
<td>San Francisco</td>486
<td>62</td>487
<td>2009/02/14</td>488
<td>$452,500</td>489
</tr>490
<tr>491
<td>Timothy Mooney</td>492
<td>Office Manager</td>493
<td>London</td>494
<td>37</td>495
<td>2008/12/11</td>496
<td>$136,200</td>497
</tr>498
<tr>499
<td>Jackson Bradshaw</td>500
<td>Director</td>501
<td>New York</td>502
<td>65</td>503
<td>2008/09/26</td>504
<td>$645,750</td>505
</tr>506
<tr>507
<td>Olivia Liang</td>508
<td>Support Engineer</td>509
<td>Singapore</td>510
<td>64</td>511
<td>2011/02/03</td>512
<td>$234,500</td>513
</tr>514
<tr>515
<td>Bruno Nash</td>516
<td>Software Engineer</td>517
<td>London</td>518
<td>38</td>519
<td>2011/05/03</td>520
<td>$163,500</td>521
</tr>522
<tr>523
<td>Sakura Yamamoto</td>524
<td>Support Engineer</td>525
<td>Tokyo</td>526
<td>37</td>527
<td>2009/08/19</td>528
<td>$139,575</td>529
</tr>530
<tr>531
<td>Thor Walton</td>532
<td>Developer</td>533
<td>New York</td>534
<td>61</td>535
<td>2013/08/11</td>536
<td>$98,540</td>537
</tr>538
<tr>539
<td>Finn Camacho</td>540
<td>Support Engineer</td>541
<td>San Francisco</td>542
<td>47</td>543
<td>2009/07/07</td>544
<td>$87,500</td>545
</tr>546
<tr>547
<td>Serge Baldwin</td>548
<td>Data Coordinator</td>549
<td>Singapore</td>550
<td>64</td>551
<td>2012/04/09</td>552
<td>$138,575</td>553
</tr>554
<tr>555
<td>Zenaida Frank</td>556
<td>Software Engineer</td>557
<td>New York</td>558
<td>63</td>559
<td>2010/01/04</td>560
<td>$125,250</td>561
</tr>562
<tr>563
<td>Zorita Serrano</td>564
<td>Software Engineer</td>565
<td>San Francisco</td>566
<td>56</td>567
<td>2012/06/01</td>568
<td>$115,000</td>569
</tr>570
<tr>571
<td>Jennifer Acosta</td>572
<td>Junior Javascript Developer</td>573
<td>Edinburgh</td>574
<td>43</td>575
<td>2013/02/01</td>576
<td>$75,650</td>577
</tr>578
<tr>579
<td>Cara Stevens</td>580
<td>Sales Assistant</td>581
<td>New York</td>582
<td>46</td>583
<td>2011/12/06</td>584
<td>$145,600</td>585
</tr>586
<tr>587
<td>Hermione Butler</td>588
<td>Regional Director</td>589
<td>London</td>590
<td>47</td>591
<td>2011/03/21</td>592
<td>$356,250</td>593
</tr>594
<tr>595
<td>Lael Greer</td>596
<td>Systems Administrator</td>597
<td>London</td>598
<td>21</td>599
<td>2009/02/27</td>600
<td>$103,500</td>601
</tr>602
<tr>603
<td>Jonas Alexander</td>604
<td>Developer</td>605
<td>San Francisco</td>606
<td>30</td>607
<td>2010/07/14</td>608
<td>$86,500</td>609
</tr>610
<tr>611
<td>Shad Decker</td>612
<td>Regional Director</td>613
<td>Edinburgh</td>614
<td>51</td>615
<td>2008/11/13</td>616
<td>$183,000</td>617
</tr>618
<tr>619
<td>Michael Bruce</td>620
<td>Javascript Developer</td>621
<td>Singapore</td>622
<td>29</td>623
<td>2011/06/27</td>624
<td>$183,000</td>625
</tr>626
<tr>627
<td>Donna Snider</td>628
<td>Customer Support</td>629
<td>New York</td>630
<td>27</td>631
<td>2011/01/25</td>632
<td>$112,000</td>633
</tr>634
</tbody>635
<tfoot>636
<tr>637
<th>Name638
</th>639
<th>Position640
</th>641
<th>Office642
</th>643
<th>Age644
</th>645
<th>Start date646
</th>647
<th>Salary648
</th>649
</tr>650
</tfoot>651
</table>652
</div>1
1
xxxxxxxxxx1
$('#dtBasicExample').mdbEditor({2
mdbEditor: true3
});4
$('.dataTables_length').addClass('bs-select'); Console errors: 0