DHTML: Kendali Data
Tabular
12.1 Pengantar
Ini merupakan bab paling krusial bagi
mereka yang ingin membangun aplikasi berbasis web. HTML dinamis (DHTML)
membantu para pengembang aplikasi web untuk menghasilkan aplikasi web yang
lebih responsif.
Dengan pengikatan data (data binding), data tidak lagi secara
eksklusif ada di server. Data dapat dikelola di klien. Secara umum, data
dikirim ke klien dan semua manipulasi terjadi pada data secara langsung di
klien, sehingga mengurangi beban aktifitas dan tunda jaringan.
Begitu data tersedia bagi klien, data
tersebut dapat diurutkan dan difilter dalam pelbagai cara. Di sini, akan
disajikan beberapa contoh dari tiap operasi tersebut.
Untuk mengikat data eksternal pada
elemen-elemen XHTML, Internet Explorer menggunakan apa yang dinamakan dengan
DSOs (Data Source Objects). Ada
beberapa DSOs yang tersedia. Di sini akan dibahas mengenai TDC (Tabular Data Control).
12.2 Pengikata Data Sederhana
TDC (Tabular Data Control) merupakan kendali ActiveX yang ditambahkan
pada sebuah halaman dengan elemen object. Data disimpan pada sebuah file yang
terpisah (Gambar 12.1) dan tidak ditanamkan ke dalam dokumen XHTML. Gambar 12.2
mendemonstrasikan kegunaan sederhana dari pengikatan data dengan TDC untuk
memperbarui isi sebuah elemen span
(file data yang digunakan pada contoh ini diberikan pada Gambar 12.1).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@NamaWarna@|@NilaiRGBHexWarna@
@aqua@|@#00FFFF@
@black@|@#000000@
@blue@|@#0000FF@
@fuchsia@|@#FF00FF@
@gray@|@#808080@
@green@|@#008000@
@lime@|@#00FF00@
@maroon@|@#800000@
@navy@|@#000080@
@olive@|@#808000@
@purple@|@#800080@
@red@|@#FF0000@
@silver@|@#C0C0C0@
@teal@|@#008080@
@yellow@|@#FFFF00@
@white@|@#FFFFFF@
|
Gambar 12.1 Data tabel warna XHTML (WarnaStandarHTML.txt)
|
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
|
<?xml
version = "1.0"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 12.2: pengenalanPengikatanDinamis.html -->
<!--
Pengikatan data sederhana dan manipulasi himpunanRekaman -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Pengikatan Data
Dinamis</title>
<!-- Elemen object ini menyisipkan
kendali ActiveX -->
<!-- untuk menangani dan
mengkonversi data. Beberapa Tag PARAM -->
<!-- memberikan parameter kendali
-->
<!-- seperti URL. -->
<object id = "Warna"
classid =
"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL"
value =
"WarnaStandarHTML.txt" />
<param name = "UseHeader"
value = "TRUE" />
<param name = "TextQualifier"
value = "@" />
<param name = "FieldDelim"
value = "|" />
</object>
<script type =
"text/javascript">
<!--
var himpunanRekaman =
Warna.recordset;
function keAngka()
{
if (
!himpunanRekaman.EOF )
angkaRekaman.innerText =
himpunanRekaman.absolutePosition;
else
angkaRekaman.innerText =
" ";
}
function maju()
{
himpunanRekaman.MoveNext();
if (
himpunanRekaman.EOF )
himpunanRekaman.MoveFirst();
contohWarna.style.backgroundColor =
warnaRGB.innerText;
keAngka();
}
// -->
</script>
</head>
<body onload = "keAngka()"
onclick = "maju()">
<h1>Tabel Warna
XHTML</h1>
<h3>Klik untuk maju di
dalam himpunan rekaman.</h3>
<p><strong>Nama
Warna: </strong>
<span id = "idWarna"
style = "font-family: monospace"
datasrc = "#Warna"
datafld = "NamaWarna"></span><br />
<strong>Nilai RGB Warna:
</strong>
<span id = "warnaRGB"
style = "font-family: monospace"
datasrc = "#Warna"
datafld = "NilaiRGBHexWarna">
</span><br
/>
Angka rekaman yang sedang dilihat
sekarang
<span id = "angkaRekaman"
style = "font-weight: 900">
</span><br
/>
<span id = "contohWarna"
style = "background-color: aqua;
color: 888888; font-size:
30pt">Contoh Warna
</span></p>
</body>
</html>
|
Gambar 12.2 Pengikatan data dinamis
Baris 1 pada Gambar 12.1 memulai data
dengan sebuah baris header. Baris ini
menetapkan nama-nama kolom (NamaWarna
dan NilaiRGBHexWarna). Data pada
tiap bidang diapit dengan text qualifier (@)
dan tiap bidang dipisahkan dengan sebuah pembatas bidang (|).
Elemen object (baris 16-23 pada Gambar 12.2) di sini menyisipkan TDC,
salah satu kendali Microsoft ActiveX. Atribut classid menetapkan kendali ActiveX untuk ditambahkan pada halaman
web. Di sini Anda menggunakan classid
dari Tabular Data Control.
Tag param menetapkan parameter-parameter untuk objek pada elemen object. Atribut name adalah nama parameter dan atribut value adalah nilai. Parameter DataURL
adalah URL dari sumber data (WarnaStandarHTML.txt). Parameter UseHeader, ketika ditetapkan menjadi true, menetapkan bahwa baris pertama dari data adalah baris header.
Parameter ketiga, TextQualifier, menetapkan text
qualifier untuk data (pada kasus ini adalah @). Text qualifier adalah karakter yang ditempatkan di kedua akhir dari
bidang data. Parameter keempat, FieldDelim,
menetapkan pembatas bidang pada data (pada kasus ini adalah |).
Baris 59-60 mengikat data pada sebuah
elemen span. Atribut datasrc merujuk pada id dari objek TDC (Warna, pada kasus ini) yang diawali dengan tanda has (#), dan atribut datafld menetapkan nama dari bidang yang mengikatnya (NamaWarna, pada kasus ini). Ini akan
menempatkan data yang dimuat pada rekaman pertama (baris) dari kolom NamaWarna ke dalam elemen span.
Sejauh ini, Anda hanya menampilkan data
secara statis. Anda dapat memperbaruinya secara dinamis dengan beberapa skrip
sederhana. Baris 27 menugaskan properti recordset
dari objek Warna (elemen object TDC) kepada variabel himpunanRekaman. Untuk pindah ke baris
berikutnya dalam sumber data, baris 41 memanggil metode MoveNext dari objek himpunanRekaman.
Ini akan memajukan satu baris di dalam himpunan rekaman, yang secara otomatis
memperbarui elemen span (pengikat
data). Perhatikan bahwa baris 40 menentukan apakah properti EOF dari himpunanRekaman adalah false.
Jika false, ini mengindikasikan bahwa akhir dari sumber data telah diraih. Jika
EOF bernilai true, maka baris 43 akan memanggil metode MoveFirst untuk pindah ke rekaman pertama di dalam file.
12.3 Menavigasi Rekaman Data
Banyak aplikasi akan membutuhkan
fungsionalitas yang lebih dari sekedar bergerak maju di dalam rekaman. Gambar 12.3
mendemonstrasikan penciptaan sebuah antarmuka pengguna untuk menavigasi sumber
data pada Gambar 12.1.
Struktur switch pada baris 31-64 mengevaluasi nilai yang akan dilewatkan
kepada pindah. Dua fungsi yang
digunakan adalah MoveLast dan MovePrevious, yang akan menggerakkan ke
rekaman terakhir dan rekaman sebelumnya. Baris 41 menguji apakah rekaman
sekarang menunjuk ke awal file (BOF), sehingga Anda mengarahkannya kembali.
|
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
|
<?xml
version = "1.0"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Gambar 12.: pindah.html -->
<!--
Menjelajah rekaman -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Melihat Rekaman
Secara Dinamis</title>
<object id =
"Warna"
classid =
"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name =
"DataURL" value =
"WarnaStandarHTML.txt" />
<param name =
"UseHeader" value = "TRUE" />
<param name =
"TextQualifier" value = "@" />
<param name =
"FieldDelim" value = "|" />
</object>
<script type = "text/javascript">
<!--
var himpunanRekaman =
Warna.recordset;
function perbarui()
{
judulh1.style.color =
warnaRGB.innerText;
}
function pindah( kemana )
{
switch ( kemana ) {
case "pertama":
himpunanRekaman.MoveFirst();
perbarui();
break;
// jika recordset di
awal, pindah ke akhir.
case "sebelumnya":
himpunanRekaman.MovePrevious();
if (
himpunanRekaman.BOF )
himpunanRekaman.MoveLast();
perbarui();
break;
// jika recordset di
akhir, pindah ke awal.
case "berikutnya":
himpunanRekaman.MoveNext();
if (
himpunanRekaman.EOF )
himpunanRekaman.MoveFirst();
perbarui();
break;
case "terakhir":
himpunanRekaman.MoveLast();
perbarui();
break;
}
}
// -->
</script>
<style type =
"text/css">
input { background-color:
khaki;
color: green;
font-weight: bold }
</style>
</head>
<body style =
"background-color: darkkhaki">
<h1 style =
"color: black" id = "judulh1">
Tabel Warna XHTML</h1>
<span style =
"position: absolute; left: 200; width: 270;
border-style: groove; text-align:
center;
background-color: cornsilk;
padding: 10">
<strong>Nama Warna:
</strong>
<span id =
"NamaWarna" style = "font-family: monospace"
datasrc = "#Warna"
datafld = "NamaWarna">ABC</span>
<br />
<strong>Nilai RGB Warna:
</strong>
<span id = "warnaRGB"
style = "font-family: monospace"
datasrc = "#Warna"
datafld = "NilaiRGBHexWarna">ABC
</span><br
/>
<input type = "button"
value = "Pertama"
onclick = "pindah(
'pertama' );" />
<input type =
"button" value = "Sebelumnya"
onclick = "pindah(
'sebelumnya' );" />
<input type =
"button" value = "Berikutnya"
onclick = "pindah(
'berikutnya' );" />
<input type =
"button" value = "Terakhir"
onclick = "pindah(
'terakhir' );" />
</span>
</body>
</html>
|
12.4 Pengikatan pada table
Pengikatan data pada sebuah elemen table mungkin merupakan fitur
terpenting pada pengikatan data. Ini dilakukan berbeda dari pengikatan data
yang telah dilakukan. Gambar 12.4 mengikat data para sebuah elemen table (data yang digunakan adalah data
pada Gambar 12.1).
Gambar 12.3 Menjelajah rekaman menggunakan JavaScript
|
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
|
<?xml
version = "1.0"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 12.4: pengikatantabel.html -->
<!--
Menggunakan Pengikatan Data dengan table -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Pengikatan Data
dan Tabel</title>
<object id =
"Warna"
classid =
"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name =
"DataURL" value =
"WarnaStandarHTML.txt" />
<param name =
"UseHeader" value = "TRUE" />
<param name =
"TextQualifier" value = "@" />
<param name =
"FieldDelim" value = "|" />
</object>
</head>
<body style =
"background-color: darkseagreen">
<h1>Pengikatan Data ke
sebuah <code>table</code></h1>
<table datasrc =
"#Warna" style = "border-style: ridge;
border-color: darkseagreen;
background-color:
lightcyan">
<thead>
<tr style =
"background-color: mediumslateblue">
<th>Nama Warna</th>
<th>Nilai RGB
Warna</th>
</tr>
</thead>
<tbody>
<tr style =
"background-color: lightsteelblue">
<td><span
datafld = "NamaWarna"></span></td>
<td><span
datafld = "NilaiRGBHexWarna"
style = "font-family:
monospace"></span></td>
</tr>
</tbody>
</table>
</body>
</html>
|
Gambar 12.4 Pengikatan data pada sebuah elemen table
Baris 25-27 memulai pengikatan tabel
dengan menambahkan atribut datasrc
pada tag table pembuka. Anda
menyempurnakan pengikatan data pada baris 38-40 dengan menambahkan atribut datafld pada beberapa tag span yang ada pada sel-sel tabel.
12.5 Pengurutan Data table
Jika Anda memanipulasi sumber data
berukuran besar, maka klien Anda mungkin akan memerlukan cara tertentu untuk
mengurutkan data tersebut. Ini dapat dilakukan menggunakan properti Sort dari TDC (Gambar 12.5).
|
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
|
<?xml
version = "1.0"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 12.5: pengurutan.html -->
<!-- Sorting
table data -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Pengikatan Data
dan Tabel</title>
<object id =
"Warna"
classid =
"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL"
value =
"WarnaStandarHTML.txt" />
<param name =
"UseHeader" value = "TRUE" />
<param name =
"TextQualifier" value = "@" />
<param name =
"FieldDelim" value = "|" />
</object>
</head>
<body style =
"background-color: darkseagreen">
<h1>Pengurutan Data</h1>
<table datasrc =
"#Warna" style = "border-style: ridge;
border-color: darkseagreen;
background-color:
lightcyan">
<caption>
Pengurutan dengan:
<select onchange =
"Warna.Sort = this.value;
Warna.Reset();">
<option value =
"NamaWarna">Nama Warna (Menaik)
</option>
<option value =
"-NamaWarna">Nama Warna (Menurun)
</option>
<option value =
"NilaiRGBHexWarna">Nilai RGB Warna
(Menaik)</option>
<option value =
"-NilaiRGBHexWarna">Nilai RGB Warna
(Menurun)</option>
</select>
</caption>
<thead>
<tr style =
"background-color: mediumslateblue">
<th>Nama
Warna</th>
<th>Nilai RGB
Warna</th>
</tr>
</thead>
<tbody>
<tr style =
"background-color: lightsteelblue">
<td><span
datafld = "NamaWarna"></span></td>
<td><span
datafld = "NilaiRGBHexWarna"
style =
"font-family: monospace"></span></td>
</tr>
</tbody>
</table>
</body>
</html>
|
Baris 31-32 mengurutkan data dengan
menetapkan kolom untuk diurutkan menggunakan properti Sort dari TDC. Contoh ini menetapkan properti Sort menjadi nilai dari tag option
yang terseleksi (this.value) ketika
event onchange terjadi. Katakunci
JavaScript, this, merujuk ke elemen
dimana di dalamnya statemen berada (elemen select).
Oleh karena itu, properti value
merujuk ke nilai tag option
terseleksi terkini. Setelah menetapkan properti Sort, Anda memanggil metode Reset
dari TDC untuk menampilkan data dengan urutan yang baru.
Baris 33-36 menetapkan atribut value dari beberapa tag option menjadi nama-nama kolom pada
file data. Secara default, sebuah kolom diurutkan dengan urutan menaik. Untuk
mengurutkan dengan tatanan menurun, nama kolom diawali dengan tanda minus (-).
Gambar 12.5 Pengurutan data di dalam elemen table
12.6 Pengurutan Lanjut
TDC dapat mengurutkan data yang memuat
beberapa kolom (Gambar 12.6). Dikombinasikan dengan pemilteran ( pemilihan data
yang memenuhi kriteria tertentu), hal ini memberikan cara jitu dalam mengelola
data (Gambar 12.7).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
@Judul:String@|@Pengarang:String@|@Hakcipta:String@|@Edisi:String@|@Tipe:String@
@Dasar
Pemrograman C++@|@Rismon,Rismon@|@2010@|@1@|@BK@
@Pemrosesan
Sinyal Digital@|@Rismon,Rismon@|@2010@|@2@|@BK@
@Teori
dan Implementasi C++@|@Rismon,Rismon@|@2011@|@1@|@BK@
@Teori
dan Implementasi Java@|@Rismon,Rismon@|@2012@|@2@|@BK@
@Java:
Algoritma, Struktur Data, dan Pemrograman
GUI@|@Rismon,Rismon@|@2012@|@1@|@BK@
@Pemrograman
MATLAB Untuk Sains dan Teknik@|@Rismon,Rismon@|@2012@|@2@|@BK@
@Struktur
Data C++ Dengan Pemrograman Generik@|@Rismon,Rismon@|@2013@|@3@|@BK@
@Pemrograman
Java Untuk Programer@|@Rismon,Rismon@|@2013@|@1@|@BK@
@Teori
dan Aplikasi Pemrograman Java@|@Rismon,Rismon@|@2013@|@1@|@BK@
@Dasar
Pemrograman Visual Basic@|@Rismon,Rismon@|@2014@|@1@|@BKMMCD@
@C#
Belajar Dari COntoh@|@Rismon,Rismon@|@2014@|@2@|@BKMMCD@
@Pemrograman
C++ Untuk Programer@|@Rismon,Rismon@|@2014@|@1@|@BKMMCD@
@Pemrograman
C++ Untuk Pemula@|@Rismon,Rismon@|@2014@|@2@|@BKMMCD@
@Dasar
Pemrograman Internet@|@Rismon,Rismon@|@2014@|@3@|@BKMMCD@
@Dasar
Pemrograman XML@|@Rismon,Rismon@|@2014@|@1@|@BKMMCD@
@Pemrosesan
Citra Digital@|@Rismon,Rismon@|@2013@|@1@|@BKMMCD@
|
|
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
|
<?xml
version = "1.0"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 12.6: pengurutanLanjut.html -->
<!--
Pengurutan dan Pemilteran data -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Pengikatan
Data--Pengurutan dan Pemilteran</title>
<object id =
"Publikasi"
classid =
"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name =
"DataURL" value = "RismonPublikasi.txt" />
<param name =
"UseHeader" value = "TRUE" />
<param name =
"TextQualifier" value = "@" />
<param name =
"FieldDelim" value = "|" />
<param name = "Sort"
value = "+Judul" />
</object>
<style type =
"text/css">
a { font-size: 9pt;
text-decoration: underline;
cursor: hand;
color: blue }
caption { cursor: hand; }
span { cursor: hand; }
</style>
<script type = "text/javascript">
<!--
var tatananUrut;
function urutLagi( kolom,
tatanan )
{
if ( tatanan )
tatananUrut =
"";
else
tatananUrut =
"-";
if ( event.ctrlKey ) {
Publikasi.Sort += ";
" + tatananUrut + kolom;
Publikasi.Reset();
}
else {
Publikasi.Sort =
tatananUrut + kolom;
Publikasi.Reset();
}
spanSort.innerText = "Urutan
Sekarang: " +
Publikasi.Sort;
}
function filter(
teksFilter, kolomFilter )
{
Publikasi.Filter = kolomFilter
+ "=" +
teksFilter;
Publikasi.Reset();
spanFilter.innerText =
"Filter Sekarang:
" + Publikasi.Filter;
}
function bersihkanSemua()
{
Publikasi.Sort = "
";
spanSort.innerText =
"Urutan Sekarang: None";
Publikasi.Filter = "
";
spanFilter.innerText =
"Urutan Filter: None";
Publikasi.Reset();
}
// -->
</script>
</head>
<body>
<h1>Pengurutan
Lanjut</h1>
<p>Klik link di samping kepala kolom untuk mengurutkan kolom
tersebut. Untuk mengurutkan lebih
dari satu kolom pada suatu waktu,
tahan Ctrl ketika Anda mengklik
link pengurutan lain. Klik
sembarang sel untuk memfilter data pada sel tersebut. Untuk membersihkan
filter dan pengurutan, klik batang
kapsion hijau.</p>
<table datasrc =
"#Publikasi" border = "1"
cellspacing = "0"
cellpadding = "2" style =
"background-color:
papayawhip;">
<caption style =
"background-color: lightgreen;
padding: 5" onclick =
"bersihkanSemua()">
<span id =
"spanFilter" style = "font-weight: bold;
background-color:
lavender">Filter Sekarang: None
</span>
<span id =
"spanSort" style = "font-weight: bold;
background-color:
khaki">Pengurutan Sekarang: None</span>
</caption>
<thead>
<tr>
<th>Judul <br
/>
(<a onclick =
"urutLagi( 'Judul', true )">
Menaik</a>
<a onclick =
"urutLagi( 'Judul', false )">
Menurun</a>)
</th>
<th>Pengarang
<br />
(<a onclick =
"urutLagi( 'Pengarang', true )">
Menaik</a>
<a onclick =
"urutLagi( 'Pengarang', false )">
Menurun</a>)
</th>
<th>Hakcipta <br
/>
(<a onclick =
"urutLagi( 'Hakcipta', true )">
Menaik</a>
<a onclick =
"urutLagi( 'Hakcipta', false )">
Menurun</a>)
</th>
<th>Edisi <br
/>
(<a onclick =
"urutLagi( 'Edisi', true )">
Menaik</a>
<a onclick =
"urutLagi( 'Edisi', false )">
Menurun</a>)
</th>
<th>Tipe <br
/>
(<a onclick =
"urutLagi( 'Tipe', true )">
Menaik</a>
<a onclick =
"urutLagi( 'Tipe', false )">
Menurun</a>)
</th>
</tr>
</thead>
<tr>
<td><span
datafld = "Judul" onclick =
"filter(
this.innerText, 'Judul' )"></span>
</td>
<td><span
datafld = "Pengarang" onclick =
"filter(
this.innerText, 'Pengarang')"></span>
</td>
<td><span
datafld = "Hakcipta" onclick =
"filter(
this.innerText, 'Hakcipta' )"></span>
</td>
<td><span
datafld = "Edisi" onclick =
"filter(
this.innerText, 'Edisi' )"></span>
</td>
<td><span
datafld = "Tipe" onclick =
"filter(
this.innerText, 'Tipe' )"></span>
</td>
</tr>
</table>
</body>
</html>
|
Gambar 12.6 Pengurutan dan Pemilteran data lanjut
No comments:
Post a Comment