Di tutorial kali ini admin akan menjelaskan Cara Membuat Datatables dengan Bootstrap, dengan menggunakan datatables bootstrap ini akan memudahkan kita untuk menampilkan data,,, kenapa... ? Karena di datatables sudah terdapat paging otomatis, pencarian otomatis, sort otomatis,, nah banyak banget kan..? coba bayangkan kalo kita menampilkan data yang ada di database dengan table biasa,,,fitur-fitur tersebut tidak ada,, dan kita harus membuat manual.. Capek deh.. haha..
Berikut ini contoh datatables... bisa dilihat pada gambar dibawah ini..
Cara Membuat Tabel Bootstrap dengan Datatables
Sudah lihat bentuk datatables.. ? saya yakin anda seorang programer pasti sangat membutuhkan ini.. dan pasti tertarik untuk membuatnya.. jika tidak..? mungkin anda sudah tau tentang hal ini,, jika tidak juga?? berarti anda programer ketinggalan zaman... heee.. becanda doank..
Ok.. Mari kita belajar membuat tabel dengan Datatables di Bootstrap :
Bootstrap
Pertama download terlebih dahulu bootstrap dari website resminya di sini : DOWNLOAD
Kemudian extrak folder CSS, Font, dan Js ke dalam folder Data_tables
Sekarang download style data table boostrap di sini : DOWNLOAD [ CTRL + S ]
Simpan di dalam folder Css
Download javascript data table bootsrtap di sini : DOWNLOAD [ CTRL + S ]
Simpan dalam folder Js
*Notes
Versi bootsrap yang di gunakan pada artikel ini adalah bootsrap versi 3
Jquery
Untuk jquery download terlebih dahulu di situs resminya di sini : DOWNLOAD
Letakan dalam folder Js
Sekarang untuk data tablesnya download di sini : DOWNLOAD [ CTRL + S ]
Letakan dalam folder Js
Note :
Jika anda Kesulitan untuk mendownload nya, anda bisa menggunakan script dibawah ini, [letakkan di antara tag paste disini , dan dengan catatan komputer anda harus terkoneksi internet
Code HTML
Untuk Membuat datatables dengan bootstrap anda bisa copas script dibawah ini , Sekarang untuk markupnya buatlah sebuah file HTML baru dengan nama index.php di dalam folder Data_tables dengan isi script :
Pada artikel kali ini kita akan sedikit bermain dengan sebuah table, dimana kita mempunyai sebuah data table yang banyak, dan data itu kita akan buat supaya rapih, dimana nanti ada pagination, seacrh, dan berapa data yang ingin di tampilkan, penasaran ya, oke jangan kemana-mana karena sesaat lagi kita akan belajar cara membuat datatables dengan tampilan bootstrap 4.
Cara membuat datatables dengan tampilan bootstrap 4, bisa dilihat disini saya juga akan menampilkan dengan tampilan bootstrap 4, dimana hasilnya nanti lebih menarik dan rapih, dan membuat datatables kita juga butuh bantuan dari sebuah datatables.net, silahkan teman-teman kunjungi, nanti pilih:
- manual
- styling
- dan pilih bootstrap 4
oke jika sudah nanti sudah terlihat bagaimana cara membuatnya dan disitu juga akan di sediakan berapa data table sebagai contoh, oke jika bingung silahkan teman-teman ikuti atau copas saja yang sudah saya buat di bawah ini seperti ini:
pertama di bagian tag head silahkan teman-teman tuliskan link cssnya seperti ini:
1
2
3
Link CSSnya
jika sudah didalam body kita silahkan teman-teman copy table beserta datanya di bawah ini:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
Name
Position
Office
Age
Start date
Salary
Tiger Nixon
System Architect
Edinburgh
61
2011/04/25
$320,800
Garrett Winters
Accountant
Tokyo
63
2011/07/25
$170,750
Ashton Cox
Junior Technical Author
San Francisco
66
2009/01/12
$86,000
Cedric Kelly
Senior Javascript Developer
Edinburgh
22
2012/03/29
$433,060
Airi Satou
Accountant
Tokyo
33
2008/11/28
$162,700
Brielle Williamson
Integration Specialist
New York
61
2012/12/02
$372,000
Herrod Chandler
Sales Assistant
San Francisco
59
2012/08/06
$137,500
Rhona Davidson
Integration Specialist
Tokyo
55
2010/10/14
$327,900
Colleen Hurst
Javascript Developer
San Francisco
39
2009/09/15
$205,500
Sonya Frost
Software Engineer
Edinburgh
23
2008/12/13
$103,600
Jena Gaines
Office Manager
London
30
2008/12/19
$90,560
Quinn Flynn
Support Lead
Edinburgh
22
2013/03/03
$342,000
Charde Marshall
Regional Director
San Francisco
36
2008/10/16
$470,600
Haley Kennedy
Senior Marketing Designer
London
43
2012/12/18
$313,500
Tatyana Fitzpatrick
Regional Director
London
19
2010/03/17
$385,750
Michael Silva
Marketing Designer
London
66
2012/11/27
$198,500
Paul Byrd
Chief Financial Officer [CFO]
New York
64
2010/06/09
$725,000
Gloria Little
Systems Administrator
New York
59
2009/04/10
$237,500
Bradley Greer
Software Engineer
London
41
2012/10/13
$132,000
Dai Rios
Personnel Lead
Edinburgh
35
2012/09/26
$217,500
Jenette Caldwell
Development Lead
New York
30
2011/09/03
$345,000
Yuri Berry
Chief Marketing Officer [CMO]
New York
40
2009/06/25
$675,000
Caesar Vance
Pre-Sales Support
New York
21
2011/12/12
$106,450
Doris Wilder
Sales Assistant
Sidney
23
2010/09/20
$85,600
Angelica Ramos
Chief Executive Officer [CEO]
London
47
2009/10/09
$1,200,000
Gavin Joyce
Developer
Edinburgh
42
2010/12/22
$92,575
Jennifer Chang
Regional Director
Singapore
28
2010/11/14
$357,650
Brenden Wagner
Software Engineer
San Francisco
28
2011/06/07
$206,850
Fiona Green
Chief Operating Officer [COO]
San Francisco
48
2010/03/11
$850,000
Shou Itou
Regional Marketing
Tokyo
20
2011/08/14
$163,000
Michelle House
Integration Specialist
Sidney
37
2011/06/02
$95,400
Suki Burks
Developer
London
53
2009/10/22
$114,500
Prescott Bartlett
Technical Author
London
27
2011/05/07
$145,000
Gavin Cortez
Team Leader
San Francisco
22
2008/10/26
$235,500
Martena Mccray
Post-Sales support
Edinburgh
46
2011/03/09
$324,050
Unity Butler
Marketing Designer
San Francisco
47
2009/12/09
$85,675
Howard Hatfield
Office Manager
San Francisco
51
2008/12/16
$164,500
Hope Fuentes
Secretary
San Francisco
41
2010/02/12
$109,850
Vivian Harrell
Financial Controller
San Francisco
62
2009/02/14
$452,500
Timothy Mooney
Office Manager
London
37
2008/12/11
$136,200
Jackson Bradshaw
Director
New York
65
2008/09/26
$645,750
Olivia Liang
Support Engineer
Singapore
64
2011/02/03
$234,500
Bruno Nash
Software Engineer
London
38
2011/05/03
$163,500
Sakura Yamamoto
Support Engineer
Tokyo
37
2009/08/19
$139,575
Thor Walton
Developer
New York
61
2013/08/11
$98,540
Finn Camacho
Support Engineer
San Francisco
47
2009/07/07
$87,500
Serge Baldwin
Data Coordinator
Singapore
64
2012/04/09
$138,575
Zenaida Frank
Software Engineer
New York
63
2010/01/04
$125,250
Zorita Serrano
Software Engineer
San Francisco
56
2012/06/01
$115,000
Jennifer Acosta
Junior Javascript Developer
Edinburgh
43
2013/02/01
$75,650
Cara Stevens
Sales Assistant
New York
46
2011/12/06
$145,600
Hermione Butler
Regional Director
London
47
2011/03/21
$356,250
Lael Greer
Systems Administrator
London
21
2009/02/27
$103,500
Jonas Alexander
Developer
San Francisco
30
2010/07/14
$86,500
Shad Decker
Regional Director
Edinburgh
51
2008/11/13
$183,000
Michael Bruce
Javascript Developer
Singapore
29
2011/06/27
$183,000
Donna Snider
Customer Support
New York
27
2011/01/25
$112,000
Name
Position
Office
Age
Start date
Salary
Cukup panjang bukan, sekarang di bagian paling bawah body kita link kan Jsnya seperti ini:
1
2
3
dan kita tambahkan sedikit script di bawah ini:
1
2
3
4
5
$[document].ready[function[] {
$['#isiTable'].DataTable[];
} ];
sekarang kita lihat hasilnya:
SIlahkan teman-teman coba, pasti sangat bermanfaat, jika punya data table yang banyak, dan terus bertambah, oke saya rasa cukup sampai disini belajar kita tentang Cara membuat datatables dengan tampilan bootstrap 4, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.