xxxxxxxxxx1
<table id="dtMaterialDesignExample" class="table" cellspacing="0" width="100%">2
<thead>3
<tr>4
<th class="th-sm">Name5
</th>6
<th class="th-sm">Position7
</th>8
<th class="th-sm">Office image9
</th>10
<th class="th-sm">Age11
</th>12
<th class="th-sm">Start date13
</th>14
<th class="th-sm">Salary15
</th>16
</tr>17
</thead>18
<tbody>19
<tr>20
<td>Tiger Nixon</td>21
<td>System Architect</td>22
<td class="image"></td>23
<td>61</td>24
<td>2011/04/25</td>25
<td>$320,800</td>26
</tr>27
<tr>28
<td>Garrett Winters</td>29
<td>Accountant</td>30
<td class="image"></td>31
<td>63</td>32
<td>2011/07/25</td>33
<td>$170,750</td>34
</tr>35
<tr>36
<td>Ashton Cox</td>37
<td>Junior Technical Author</td>38
<td class="image"></td>39
<td>66</td>40
<td>2009/01/12</td>41
<td>$86,000</td>42
</tr>43
44
</tbody>45
<tfoot>46
<tr>47
<th>Name48
</th>49
<th>Position50
</th>51
<th>Office image52
</th>53
<th>Age54
</th>55
<th>Start date56
</th>57
<th>Salary58
</th>59
</tr>60
</tfoot>61
</table>xxxxxxxxxx1
.image {2
background: url("https://mdbootstrap.com/img/new/slides/041.jpg") center no-repeat;3
background-size: cover;4
height: 100px;5
}xxxxxxxxxx1
// Material Design example2
$(document).ready(function () {3
$('#dtMaterialDesignExample').DataTable();4
$('#dtMaterialDesignExample_wrapper').find('label').each(function () {5
$(this).parent().append($(this).children());6
});7
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {8
const $this = $(this);9
$this.attr("placeholder", "Search");10
$this.removeClass('form-control-sm');11
});12
$('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');13
$('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');14
$('#dtMaterialDesignExample_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');15
$('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');16
$('#dtMaterialDesignExample_wrapper .mdb-select').materialSelect();17
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();18
}); Console errors: 0