xxxxxxxxxx1
<template>2
<div class="m-5">3
<mdb-datatable-24
v-model="data"5
small6
striped7
multiselectable8
selectColor="blue lighten-4"9
bordered10
arrows11
:display="7"12
focus13
hover14
hoverColor="#bbdefb"15
ref="dataTable"16
fullPagination17
v-on:pages="handlePagesEvent"18
/>19
<mdb-pagination>20
<mdb-page-nav21
prev22
v-on:click.native="$refs.dataTable.changePage(0)"23
></mdb-page-nav>24
<mdb-page-item v-on:click.native="$refs.dataTable.changePage(1)"25
>1</mdb-page-item26
>27
<mdb-page-item v-on:click.native="$refs.dataTable.changePage(2)"28
>2</mdb-page-item29
>30
<mdb-page-item v-on:click.native="$refs.dataTable.changePage(3)"31
>3</mdb-page-item32
>33
<mdb-page-nav34
next35
v-on:click.native="$refs.dataTable.changePage(7)"36
></mdb-page-nav>37
</mdb-pagination>38
39
<div>40
Number of pages {{numberOfPages}}41
</div>42
</div>43
</template>xxxxxxxxxx1
<style>2
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");3
.hello {4
margin-top: 150px;5
text-align: center;6
}7
h3 {8
font-weight: normal;9
padding-top: 20px;10
padding-bottom: 30px;11
}12
p {13
color: #969696;14
margin-bottom: 0;15
font-size: 14px;16
}17
</style>xxxxxxxxxx1
<script>2
import { mdbDatatable2, mdbPagination, mdbPageItem, mdbPageNav } from "mdbvue";3
export default {4
name: "DatatablePage",5
components: {6
mdbDatatable2,7
mdbPagination,8
mdbPageItem,9
mdbPageNav,10
},11
methods: {12
handlePagesEvent(value){13
this.numberOfPages = value.length14
}15
},16
data() {17
return {18
numberOfPages:0,19
data: {20
columns: [21
{22
label: "Name",23
field: "name",24
sort: true,25
},26
{27
label: "Position",28
field: "position",29
sort: true,30
},31
{32
label: "Office",33
field: "office",34
sort: true,35
},36
{37
label: "Age",38
field: "age",39
sort: true,40
},41
{42
label: "Start date",43
field: "date",44
sort: true,45
},46
{47
label: "Salary",48
field: "salary",49
sort: false,50
format: (value) => "£" + value,51
},52
],53
rows: [54
{55
name: "Tiger Nixon",56
position: "System Architect",57
office: "Edinburgh",58
age: "61",59
date: "2011/04/25",60
salary: "320",61
},62
{63
name: "Garrett Winters",64
position: "Accountant",65
office: "Tokyo",66
age: "63",67
date: "2011/07/25",68
salary: "170",69
},70
{71
name: "Ashton Cox",72
position: "Junior Technical Author",73
office: "San Francisco",74
age: "66",75
date: "2009/01/12",76
salary: "86",77
},78
{79
name: "Cedric Kelly",80
position: "Senior Javascript Developer",81
office: "Edinburgh",82
age: "22",83
date: "2012/03/29",84
salary: "433",85
},86
{87
name: "Airi Satou",88
position: "Accountant",89
office: "Tokyo",90
age: "33",91
date: "2008/11/28",92
salary: "162",93
},94
{95
name: "Brielle Williamson",96
position: "Integration Specialist",97
office: "New York",98
age: "61",99
date: "2012/12/02",100
salary: "372",101
},102
{103
name: "Herrod Chandler",104
position: "Sales Assistant",105
office: "San Francisco",106
age: "59",107
date: "2012/08/06",108
salary: "137",109
},110
{111
name: "Rhona Davidson",112
position: "Integration Specialist",113
office: "Tokyo",114
age: "55",115
date: "2010/10/14",116
salary: "327",117
},118
{119
name: "Colleen Hurst",120
position: "Javascript Developer",121
office: "San Francisco",122
age: "39",123
date: "2009/09/15",124
salary: "205",125
},126
{127
name: "Sonya Frost",128
position: "Software Engineer",129
office: "Edinburgh",130
age: "23",131
date: "2008/12/13",132
salary: "103",133
},134
{135
name: "Jena Gaines",136
position: "Office Manager",137
office: "London",138
age: "30",139
date: "2008/12/19",140
salary: "90",141
},142
{143
name: "Quinn Flynn",144
position: "Support Lead",145
office: "Edinburgh",146
age: "22",147
date: "2013/03/03",148
salary: "342",149
},150
{151
name: "Charde Marshall",152
position: "Regional Director",153
office: "San Francisco",154
age: "36",155
date: "2008/10/16",156
salary: "470",157
},158
{159
name: "Haley Kennedy",160
position: "Senior Marketing Designer",161
office: "London",162
age: "43",163
date: "2012/12/18",164
salary: "313",165
},166
{167
name: "Tatyana Fitzpatrick",168
position: "Regional Director",169
office: "London",170
age: "19",171
date: "2010/03/17",172
salary: "385",173
},174
{175
name: "Michael Silva",176
position: "Marketing Designer",177
office: "London",178
age: "66",179
date: "2012/11/27",180
salary: "198",181
},182
{183
name: "Paul Byrd",184
position: "Chief Financial Officer (CFO)",185
office: "New York",186
age: "64",187
date: "2010/06/09",188
salary: "725",189
},190
{191
name: "Gloria Little",192
position: "Systems Administrator",193
office: "New York",194
age: "59",195
date: "2009/04/10",196
salary: "237",197
},198
{199
name: "Bradley Greer",200
position: "Software Engineer",201
office: "London",202
age: "41",203
date: "2012/10/13",204
salary: "132",205
},206
{207
name: "Dai Rios",208
position: "Personnel Lead",209
office: "Edinburgh",210
age: "35",211
date: "2012/09/26",212
salary: "217",213
},214
{215
name: "Jenette Caldwell",216
position: "Development Lead",217
office: "New York",218
age: "30",219
date: "2011/09/03",220
salary: "345",221
},222
{223
name: "Yuri Berry",224
position: "Chief Marketing Officer (CMO)",225
office: "New York",226
age: "40",227
date: "2009/06/25",228
salary: "675",229
},230
{231
name: "Caesar Vance",232
position: "Pre-Sales Support",233
office: "New York",234
age: "21",235
date: "2011/12/12",236
salary: "106",237
},238
{239
name: "Doris Wilder",240
position: "Sales Assistant",241
office: "Sidney",242
age: "23",243
date: "2010/09/20",244
salary: "85",245
},246
{247
name: "Angelica Ramos",248
position: "Chief Executive Officer (CEO)",249
office: "London",250
age: "47",251
date: "2009/10/09",252
salary: "1",253
},254
{255
name: "Gavin Joyce",256
position: "Developer",257
office: "Edinburgh",258
age: "42",259
date: "2010/12/22",260
salary: "92",261
},262
{263
name: "Jennifer Chang",264
position: "Regional Director",265
office: "Singapore",266
age: "28",267
date: "2010/11/14",268
salary: "357",269
},270
{271
name: "Brenden Wagner",272
position: "Software Engineer",273
office: "San Francisco",274
age: "28",275
date: "2011/06/07",276
salary: "206",277
},278
{279
name: "Fiona Green",280
position: "Chief Operating Officer (COO)",281
office: "San Francisco",282
age: "48",283
date: "2010/03/11",284
salary: "850",285
},286
{287
name: "Shou Itou",288
position: "Regional Marketing",289
office: "Tokyo",290
age: "20",291
date: "2011/08/14",292
salary: "163",293
},294
{295
name: "Michelle House",296
position: "Integration Specialist",297
office: "Sidney",298
age: "37",299
date: "2011/06/02",300
salary: "95",301
},302
{303
name: "Suki Burks",304
position: "Developer",305
office: "London",306
age: "53",307
date: "2009/10/22",308
salary: "114",309
},310
{311
name: "Prescott Bartlett",312
position: "Technical Author",313
office: "London",314
age: "27",315
date: "2011/05/07",316
salary: "145",317
},318
{319
name: "Gavin Cortez",320
position: "Team Leader",321
office: "San Francisco",322
age: "22",323
date: "2008/10/26",324
salary: "235",325
},326
{327
name: "Martena Mccray",328
position: "Post-Sales support",329
office: "Edinburgh",330
age: "46",331
date: "2011/03/09",332
salary: "324",333
},334
{335
name: "Unity Butler",336
position: "Marketing Designer",337
office: "San Francisco",338
age: "47",339
date: "2009/12/09",340
salary: "85",341
},342
{343
name: "Howard Hatfield",344
position: "Office Manager",345
office: "San Francisco",346
age: "51",347
date: "2008/12/16",348
salary: "164",349
},350
{351
name: "Hope Fuentes",352
position: "Secretary",353
office: "San Francisco",354
age: "41",355
date: "2010/02/12",356
salary: "109",357
},358
{359
name: "Vivian Harrell",360
position: "Financial Controller",361
office: "San Francisco",362
age: "62",363
date: "2009/02/14",364
salary: "452",365
},366
{367
name: "Timothy Mooney",368
position: "Office Manager",369
office: "London",370
age: "37",371
date: "2008/12/11",372
salary: "136",373
},374
{375
name: "Jackson Bradshaw",376
position: "Director",377
office: "New York",378
age: "65",379
date: "2008/09/26",380
salary: "645",381
},382
{383
name: "Olivia Liang",384
position: "Support Engineer",385
office: "Singapore",386
age: "64",387
date: "2011/02/03",388
salary: "234",389
},390
{391
name: "Bruno Nash",392
position: "Software Engineer",393
office: "London",394
age: "38",395
date: "2011/05/03",396
salary: "163",397
},398
{399
name: "Sakura Yamamoto",400
position: "Support Engineer",401
office: "Tokyo",402
age: "37",403
date: "2009/08/19",404
salary: "139",405
},406
{407
name: "Thor Walton",408
position: "Developer",409
office: "New York",410
age: "61",411
date: "2013/08/11",412
salary: "98",413
},414
{415
name: "Finn Camacho",416
position: "Support Engineer",417
office: "San Francisco",418
age: "47",419
date: "2009/07/07",420
salary: "87",421
},422
{423
name: "Serge Baldwin",424
position: "Data Coordinator",425
office: "Singapore",426
age: "64",427
date: "2012/04/09",428
salary: "138",429
},430
{431
name: "Zenaida Frank",432
position: "Software Engineer",433
office: "New York",434
age: "63",435
date: "2010/01/04",436
salary: "125",437
},438
{439
name: "Zorita Serrano",440
position: "Software Engineer",441
office: "San Francisco",442
age: "56",443
date: "2012/06/01",444
salary: "115",445
},446
{447
name: "Jennifer Acosta",448
position: "Junior Javascript Developer",449
office: "Edinburgh",450
age: "43",451
date: "2013/02/01",452
salary: "75",453
},454
{455
name: "Cara Stevens",456
position: "Sales Assistant",457
office: "New York",458
age: "46",459
date: "2011/12/06",460
salary: "145",461
},462
{463
name: "Hermione Butler",464
position: "Regional Director",465
office: "London",466
age: "47",467
date: "2011/03/21",468
salary: "356",469
},470
{471
name: "Lael Greer",472
position: "Systems Administrator",473
office: "London",474
age: "21",475
date: "2009/02/27",476
salary: "103",477
},478
{479
name: "Jonas Alexander",480
position: "Developer",481
office: "San Francisco",482
age: "30",483
date: "2010/07/14",484
salary: "86",485
},486
{487
name: "Shad Decker",488
position: "Regional Director",489
office: "Edinburgh",490
age: "51",491
date: "2008/11/13",492
salary: "183",493
},494
{495
name: "Michael Bruce",496
position: "Javascript Developer",497
office: "Singapore",498
age: "29",499
date: "2011/06/27",500
salary: "183",501
},502
{503
name: "Donna Snider",504
position: "Customer Support",505
office: "New York",506
age: "27",507
date: "2011/01/25",508
salary: "112",509
},510
{511
name: "Jonas Alexander",512
position: "Developer",513
office: "San Francisco",514
age: "30",515
date: "2010/07/14",516
salary: "86",517
},518
{519
name: "Shad Decker",520
position: "Regional Director",521
office: "Edinburgh",522
age: "51",523
date: "2008/11/13",524
salary: "183",525
},526
{527
name: "Michael Bruce",528
position: "Javascript Developer",529
office: "Singapore",530
age: "29",531
date: "2011/06/27",532
salary: "183",533
},534
{535
name: "Donna Snider",536
position: "Customer Support",537
office: "New York",538
age: "27",539
date: "2011/01/25",540
salary: "112",541
},542
{543
name: "Hermione Butler",544
position: "Regional Director",545
office: "London",546
age: "47",547
date: "2011/03/21",548
salary: "356",549
},550
{551
name: "Lael Greer",552
position: "Systems Administrator",553
office: "London",554
age: "21",555
date: "2009/02/27",556
salary: "103",557
},558
{559
name: "Jonas Alexander",560
position: "Developer",561
office: "San Francisco",562
age: "30",563
date: "2010/07/14",564
salary: "86",565
},566
{567
name: "Shad Decker",568
position: "Regional Director",569
office: "Edinburgh",570
age: "51",571
date: "2008/11/13",572
salary: "183",573
},574
{575
name: "Michael Bruce",576
position: "Javascript Developer",577
office: "Singapore",578
age: "29",579
date: "2011/06/27",580
salary: "183",581
},582
{583
name: "Donna Snider",584
position: "Customer Support",585
office: "New York",586
age: "27",587
date: "2011/01/25",588
salary: "112",589
},590
{591
name: "Jonas Alexander",592
position: "Developer",593
office: "San Francisco",594
age: "30",595
date: "2010/07/14",596
salary: "86",597
},598
{599
name: "Shad Decker",600
position: "Regional Director",601
office: "Edinburgh",602
age: "51",603
date: "2008/11/13",604
salary: "183",605
},606
{607
name: "Michael Bruce",608
position: "Javascript Developer",609
office: "Singapore",610
age: "29",611
date: "2011/06/27",612
salary: "183",613
},614
{615
name: "Donna Snider",616
position: "Customer Support",617
office: "New York",618
age: "27",619
date: "2011/01/25",620
salary: "112",621
},622
],623
},624
};625
},626
};627
</script>628
Console errors: 0