xxxxxxxxxx1
2
<!DOCTYPE html>3
<html lang="en">4
5
<head>6
<meta charset="utf-8">7
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">8
<meta http-equiv="x-ua-compatible" content="ie=edge">9
<title>Material Design Bootstrap - DataTable Editor</title>10
<!-- Font Awesome -->11
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">12
<!-- Bootstrap core CSS -->13
<link href="../css/bootstrap.min.css" rel="stylesheet">14
<!-- Material Design Bootstrap -->15
<link href="../css/mdb.min.css" rel="stylesheet">16
<!-- Your custom styles (optional) -->17
<link href="../css/style.min.css" rel="stylesheet">18
<link rel="stylesheet" href="../css/addons/datatables.min.css">19
<link rel="stylesheet" href="../css/addons/table-editor.min.css">20
</head>21
22
<body>23
<div class="container mb-2">24
25
<div class="wrapper-editor">26
27
28
<div class="row d-flex justify-content-center modalWrapper">29
<div class="modal fade addNewInputs" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="modalAdd"30
aria-hidden="true">31
<div class="modal-dialog" role="document">32
<div class="modal-content">33
<div class="modal-header text-center">34
<h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Add New User</h4>35
<button type="button" class="close text-primary" data-dismiss="modal" aria-label="Close">36
<span aria-hidden="true">×</span>37
</button>38
</div>39
<div class="modal-body mx-3">40
<div class="md-form mb-5">41
<input type="text" id="inputName" class="form-control validate">42
<label data-error="wrong" data-success="right" for="inputName">Name</label>43
</div>44
<div class="md-form mb-5">45
<input type="text" id="inputPosition" class="form-control validate">46
<label data-error="wrong" data-success="right" for="inputPosition">Position</label>47
</div>48
<div class="md-form mb-5">49
<input type="text" id="inputEmail" class="form-control validate">50
<label data-error="wrong" data-success="right" for="inputEmail">Email</label>51
</div>52
<div class="md-form mb-5">53
<input type="text" id="inputTel" class="form-control validate">54
<label data-error="wrong" data-success="right" for="inputTel">Phone Number</label>55
</div>56
<div class="md-form mb-5">57
<input type="date" id="inputDocumentStatus" class="form-control" placeholder="Select Date">58
<label data-error="wrong" data-success="right" for="inputDocumentStatus">Document Status</label>59
</div>60
<div class="md-form mb-5">61
<input type="text" id="inputLocations" class="form-control validate">62
<label data-error="wrong" data-success="right" for="inputLocations">Locations</label>63
</div>64
</div>65
<div class="modal-footer d-flex justify-content-center buttonAddFormWrapper">66
<button class="btn btn-outline-primary btn-block buttonAdd" data-dismiss="modal">Add User67
<i class="far fa-paper-plane ml-1"></i>68
</button>69
</div>70
</div>71
</div>72
</div>73
<div class="text-center wrapperToBtnModalAdd">74
<a href="" class="btn btn-info btn-rounded btn-sm btnToModalAdd" data-toggle="modal" data-target="#modalAdd">Add<i75
class="fas fa-plus-square ml-1"></i></a>76
</div>77
<div class="modal fade modalEditClass" id="modalEdit" tabindex="-1" role="dialog" aria-hidden="true">78
<div class="modal-dialog" role="document">79
<div class="modal-content">80
<div class="modal-header text-center">81
<h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Edit User</h4>82
<button type="button" class="close text-primary" data-dismiss="modal" aria-label="Close">83
<span aria-hidden="true">×</span>84
</button>85
</div>86
<div class="modal-body mx-3 modal-inputs">87
<div class="md-form mb-5">88
<input type="text" id="formNameEdit" class="form-control validate">89
<label data-error="wrong" data-success="right" for="formNameEdit">Name</label>90
</div>91
<div class="md-form mb-5">92
<input type="text" id="formPositionEdit" class="form-control validate">93
<label data-error="wrong" data-success="right" for="formPositionEdit">Position</label>94
</div>95
<div class="md-form mb-5">96
<input type="text" id="formEmailEdit" class="form-control validate">97
<label data-error="wrong" data-success="right" for="formEmailEdit">Email</label>98
</div>99
<div class="md-form mb-5">100
<input type="text" id="formTelEdit" class="form-control validate">101
<label data-error="wrong" data-success="right" for="formTelEdit">Phone Number</label>102
</div>103
<div class="md-form mb-5">104
<input type="text" id="formDocumentStatusEdit" class="form-control datepicker">105
<label data-error="wrong" data-success="right" for="formDocumentStatusEdit">Document Status</label>106
</div>107
<div class="md-form mb-5">108
<input type="text" id="formLocationsEdit" class="form-control validate">109
<label data-error="wrong" data-success="right" for="formLocationsEdit">Locations</label>110
</div>111
112
</div>113
<div class="modal-footer d-flex justify-content-center editInsideWrapper">114
<button class="btn btn-outline-primary btn-block editInside" data-dismiss="modal">Edit115
User116
<i class="far fa-paper-plane ml-1"></i>117
</button>118
</div>119
</div>120
</div>121
</div>122
<div class="text-center buttonEditWrapper">123
<button class="btn btn-info btn-rounded btn-sm buttonEdit" data-toggle="modal" data-target="#modalEdit"124
disabled>Edit<i class="fas fa-pen-square ml-1"></i></a>125
</div>126
<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="modalDelete" 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 you want to delete this user?</p>137
</div>138
<div class="modal-footer d-flex justify-content-center deleteButtonsWrapper">139
<button type="button" class="btn btn-outline-danger btnYesClass" id="btnYes" data-dismiss="modal">Yes140
<i class="far fa-paper-plane ml-1"></i>141
</button>142
<button type="button" class="btn btn-outline-primary btnNoClass" id="btnNo" data-dismiss="modal">No143
<i class="far fa-paper-plane ml-1"></i>144
</button>145
</div>146
</div>147
</div>148
</div>149
<div class="text-center wrapperToBtnModalAdd">150
<button class="btn btn-danger btn-sm btn-rounded buttonDelete" data-toggle="modal" disabled data-target="#modalDelete"151
disabled>Delete<i class="fas fa-times ml-1"></i></a>152
</div>153
<div class="text-center wrapperToBtnModalAdd">154
<a href="" class="btn btn-info btn-rounded btn-sm btnToModalAdd" >Upload CSV<i155
class="fas fa-upload ml-1"></i></a>156
</div>157
<div class="text-center wrapperToBtnModalAdd">158
<a href="" class="btn btn-info btn-rounded btn-sm btnToModalAdd" >Download CSV<i159
class="fas fa-download ml-1"></i></a>160
</div>161
</div>162
<table id="dtBasicExample" class="table table-striped table-bordered" cellspacing="0" width="100%">163
<thead>164
<tr>165
<th class="th-sm">Name166
</th>167
<th class="th-sm">Position168
</th>169
<th class="th-sm">Email170
</th>171
<th class="th-sm">Phone Number172
</th>173
<th class="th-sm">Document Status174
</th>175
<th class="th-sm">Locations176
</th>177
</tr>178
</thead>179
<tbody>180
<tr>181
<td>Tiger Nixon</td>182
<td>CRNA</td>183
<td>tiger@gmail.com</td>184
<td>555-555-5555</td>185
<td>Good</td>186
<td>NPSS, WFSS, LSSC</td>187
</tr>188
189
</tbody>190
<tfoot>191
<tr>192
<th class="th-sm">Name193
</th>194
<th class="th-sm">Position195
</th>196
<th class="th-sm">Email197
</th>198
<th class="th-sm">Phone Number199
</th>200
<th class="th-sm">Document Status201
</th>202
<th class="th-sm">Locations203
</th>204
</tr>205
</tfoot>206
</table>207
</div>208
209
</div>210
<!-- SCRIPTS -->211
<!-- JQuery -->212
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>213
<!-- Bootstrap tooltips -->214
<script type="text/javascript" src="../js/popper.min.js"></script>215
<!-- Bootstrap core JavaScript -->216
<script type="text/javascript" src="../js/bootstrap.min.js"></script>217
<!-- MDB core JavaScript -->218
<script type="text/javascript" src="../js/mdb.min.js"></script>219
<script type="text/javascript" src="../js/addons/datatables.min.js"></script>220
<script type="text/javascript" src="../js/addons/mdb-editor.js"></script>221
222
</body>223
224
</html>225
1
1
xxxxxxxxxx1
$('#dtBasicExample, #dtBasicExample-1, #dt-more-columns, #dt-less-columns').mdbEditor({2
modalEditor: true3
});4
$('.dataTables_length').addClass('bs-select');5
Console errors: 0