xxxxxxxxxx1
<div class="card-body">2
<div class="input-group mb-4">3
<input type="text" class="form-control" id="advanced-search-input" placeholder="Type anything..." />4
<button class="btn btn-primary" id="advanced-search-button" type="button">5
<i class="fa fa-search"></i>6
</button>7
</div>8
<div id="datatable" data-mdb-selectable="true" data-mdb-multi="true" data-mdb-fixed-header="true" data-mdb-max-height="520"></div>9
</div>1
1
xxxxxxxxxx1
const instance = new mdb.Datatable(document.getElementById('datatable'), {2
columns: [3
{ label: 'Name', field: 'name' },4
{ label: 'Job Title', field: 'job_title' },5
{ label: 'Company', field: 'company' },6
{ label: 'Email', field: 'email'},7
{ label: 'Sport', field: 'sport'},8
{ label: 'Department', field: 'department'},9
{ label: 'Group', field: 'group'},10
{ label: 'Last updated', field: 'last_update'},11
{ label: 'Edit', field: 'contact'}12
],13
rows: [14
{15
name: 'Tiger Nixon',16
job_title: 'System Architect',17
company: 'Edinburgh',18
email: 'tiger.nixon@gmail.com',19
sport: 'Three',20
department: 'Five',21
group: 'Four, Six, Eight, Nine',22
last_update: '20 minutes ago'23
},24
{25
name: 'Tiger Nixon',26
job_title: 'System Architect',27
company: 'Edinburgh',28
email: 'tiger.nixon@gmail.com',29
sport: 'Three',30
department: 'Five',31
group: 'Four, Six, Eight, Nine',32
last_update: '20 minutes ago'33
},34
{35
name: 'Tiger Nixon',36
job_title: 'System Architect',37
company: 'Edinburgh',38
email: 'tiger.nixon@gmail.com',39
sport: 'Three',40
department: 'Five',41
group: 'Four, Six, Eight, Nine',42
last_update: '20 minutes ago'43
},44
{45
name: 'Tiger Nixon',46
job_title: 'System Architect',47
company: 'Edinburgh',48
email: 'tiger.nixon@gmail.com',49
sport: 'Three',50
department: 'Five',51
group: 'Four, Six, Eight, Nine',52
last_update: '20 minutes ago'53
},54
{55
name: 'Tiger Nixon',56
job_title: 'System Architect',57
company: 'Edinburgh',58
email: 'tiger.nixon@gmail.com',59
sport: 'Three',60
department: 'Five',61
group: 'Four, Six, Eight, Nine',62
last_update: '20 minutes ago'63
},64
{65
name: 'Tiger Nixon',66
job_title: 'System Architect',67
company: 'Edinburgh',68
email: 'tiger.nixon@gmail.com',69
sport: 'Three',70
department: 'Five',71
group: 'Four, Six, Eight, Nine',72
last_update: '20 minutes ago'73
},74
{75
name: 'Tiger Nixon',76
job_title: 'System Architect',77
company: 'Edinburgh',78
email: 'tiger.nixon@gmail.com',79
sport: 'Three',80
department: 'Five',81
group: 'Four, Six, Eight, Nine',82
last_update: '20 minutes ago'83
},84
{85
name: 'Tiger Nixon',86
job_title: 'System Architect',87
company: 'Edinburgh',88
email: 'tiger.nixon@gmail.com',89
sport: 'Three',90
department: 'Five',91
group: 'Four, Six, Eight, Nine',92
last_update: '20 minutes ago'93
},94
{95
name: 'Tiger Nixon',96
job_title: 'System Architect',97
company: 'Edinburgh',98
email: 'tiger.nixon@gmail.com',99
sport: 'Three',100
department: 'Five',101
group: 'Four, Six, Eight, Nine',102
last_update: '20 minutes ago'103
},104
{105
name: 'Tiger Nixon',106
job_title: 'System Architect',107
company: 'Edinburgh',108
email: 'tiger.nixon@gmail.com',109
sport: 'Three',110
department: 'Five',111
group: 'Four, Six, Eight, Nine',112
last_update: '20 minutes ago'113
},114
{115
name: 'Tiger Nixon',116
job_title: 'System Architect',117
company: 'Edinburgh',118
email: 'tiger.nixon@gmail.com',119
sport: 'Three',120
department: 'Five',121
group: 'Four, Six, Eight, Nine',122
last_update: '20 minutes ago'123
},124
{125
name: 'Tiger Nixon',126
job_title: 'System Architect',127
company: 'Edinburgh',128
email: 'tiger.nixon@gmail.com',129
sport: 'Three',130
department: 'Five',131
group: 'Four, Six, Eight, Nine',132
last_update: '20 minutes ago'133
},134
{135
name: 'Tiger Nixon',136
job_title: 'System Architect',137
company: 'Edinburgh',138
email: 'tiger.nixon@gmail.com',139
sport: 'Three',140
department: 'Five',141
group: 'Four, Six, Eight, Nine',142
last_update: '20 minutes ago'143
},144
{145
name: 'Tiger Nixon',146
job_title: 'System Architect',147
company: 'Edinburgh',148
email: 'tiger.nixon@gmail.com',149
sport: 'Three',150
department: 'Five',151
group: 'Four, Six, Eight, Nine',152
last_update: '20 minutes ago'153
},154
{155
name: 'Tiger Nixon',156
job_title: 'System Architect',157
company: 'Edinburgh',158
email: 'tiger.nixon@gmail.com',159
sport: 'Three',160
department: 'Five',161
group: 'Four, Six, Eight, Nine',162
last_update: '20 minutes ago'163
},164
{165
name: 'Tiger Nixon',166
job_title: 'System Architect',167
company: 'Edinburgh',168
email: 'tiger.nixon@gmail.com',169
sport: 'Three',170
department: 'Five',171
group: 'Four, Six, Eight, Nine',172
last_update: '20 minutes ago'173
},174
{175
name: 'Tiger Nixon',176
job_title: 'System Architect',177
company: 'Edinburgh',178
email: 'tiger.nixon@gmail.com',179
sport: 'Three',180
department: 'Five',181
group: 'Four, Six, Eight, Nine',182
last_update: '20 minutes ago'183
},184
{185
name: 'Tiger Nixon',186
job_title: 'System Architect',187
company: 'Edinburgh',188
email: 'tiger.nixon@gmail.com',189
sport: 'Three',190
department: 'Five',191
group: 'Four, Six, Eight, Nine',192
last_update: '20 minutes ago'193
},194
{195
name: 'Tiger Nixon',196
job_title: 'System Architect',197
company: 'Edinburgh',198
email: 'tiger.nixon@gmail.com',199
sport: 'Three',200
department: 'Five',201
group: 'Four, Six, Eight, Nine',202
last_update: '20 minutes ago'203
},204
{205
name: 'Tiger Nixon',206
job_title: 'System Architect',207
company: 'Edinburgh',208
email: 'tiger.nixon@gmail.com',209
sport: 'Three',210
department: 'Five',211
group: 'Four, Six, Eight, Nine',212
last_update: '20 minutes ago'213
},214
215
{216
name: 'Sonya Frost',217
job_title: 'Software Engineer',218
company: 'Edinburgh',219
email: 'sfrost@gmail.com',220
sport: 'Two',221
department: 'Five',222
group: 'Two, Seven',223
last_update: '3 days ago'224
},225
{226
name: 'Tatyana Fitzpatrick',227
job_title: 'Regional Director',228
company: 'London',229
email: 'tfitz@gmail.com',230
sport: 'Four',231
department: 'Three',232
group: 'One, Three, Five',233
last_update: '2 hours ago'234
}, {235
name: 'Tatyana Fitzpatrick',236
job_title: 'Regional Director',237
company: 'London',238
email: 'tfitz@gmail.com',239
sport: 'Four',240
department: 'Three',241
group: 'One, Three, Five',242
last_update: '2 hours ago'243
},244
].map((row) => {245
return {246
...row,247
contact: `248
<button onclick="clk()" onmouseover="table_data = $(this).parent().parent().index()" class="call-btn btn btn-light btn-floating btn-sm"><i class="fas fa-user-edit"></i></button>249
<button onmouseover="$('#delete_input').val($(this).val())" onclick="$('#delete_form').submit()" type="submit" value="${row.email}" class="message-btn btn ms-2 btn-light btn-floating btn-sm"><i class="fas fa-trash"></i></button>`,250
};251
}),252
}, { hover: true });253
254
const advancedSearchInput = document.getElementById('advanced-search-input');255
256
const search = (value) => {257
let [phrase, columns] = value.split(' in:').map((str) => str.trim());258
259
if (columns) {260
columns = columns.split(',').map((str) => str.toLowerCase().trim());261
}262
instance.search(phrase, columns);263
}264
265
document.getElementById('advanced-search-button').addEventListener('click', (e) => {266
search(advancedSearchInput.value)267
document.querySelector('.datatable-inner').scrollTo(0, 0);268
});269
advancedSearchInput.addEventListener('keydown', (e) => {270
if (e.keyCode === 13) {271
search(e.target.value);272
}273
}) Console errors: 0