Skip to content →

Sorting Tabel HTML dengan JavaScript

Teman-2 pernah menjumpai table  di sebuah halaman web yang data yang ada didalamnya bisa di sorting atau di urutkan berdasarkan kolom yang dipilih. Yah itulah yang saya maksud, entah apa namanya tapi saya menyebutnya dengan tabel sorter.

Tabel Sorter ini sangat bermanfaat dan sering digunakan dalam aplikasi web base. Beberapa waktu lalu saya menemukan sebuah script yang berfungsi untuk mensorting tabel html. Script ini dibuat oleh seorang programmer yang baik hati dan boleh di download secara cuma-cuma.

Contoh sederhananya adalah seperti di bawah ini :

ID

Name

Phone

Email

Zip

8 Harper Bowen (810) 652-6704 dis@duinec.ca 77110
9 Caldwell Larson (850) 562-3177 elit@dolor.com 87519
10 Baker Osborn (378) 371-0559 turpis.Nulla@ac.edu 69446
11 Yael Owens (465) 520-1801 nunc.ac.mattis@enim.com 93872
12 Fletcher Briggs (992) 962-9419 amet.ante@lentesque.edu 87282
13 Maggy Murphy (585) 210-0390 eu@Integer.com 98081
14 Maggie Blake (489) 101-5447 rutrum.non.hendrerit@iaculis.org 85131
15 Ginger Bell (934) 692-7294 erat.in.conetuer@pedenout.org 78878
16 Iliana Ballard (806) 835-7035 vel.sapien@mi.ca 84718
50 Eden Burks (576) 196-6013 lorem@magna.com 30822



sourcenya sebagai berikut :
[js]
<link rel=”stylesheet” href=”http://hangga.web.id/sorting/style.css” />
</head>
<body>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ id=”table” class=”sortable”>
<thead>
<tr>
<th class=”nosort”><h3>ID</h3></th>
<th><h3>Name</h3></th>
<th><h3>Phone</h3></th>
<th><h3>Email</h3></th>
<th><h3>Zip</h3></th>

</tr>
</thead>
<tbody>

<tr>
<td>8</td>
<td>Harper Bowen</td>
<td>(810) 652-6704</td>
<td><a href=”mailto:#”>dis@duinec.ca</a></td>
<td>77110</td>

</tr>
<tr>
<td>9</td>
<td>Caldwell Larson</td>
<td>(850) 562-3177</td>
<td><a href=”mailto:#”>elit@dolor.com</a></td>
<td>87519</td>

</tr>
<tr>
<td>10</td>
<td>Baker Osborn</td>
<td>(378) 371-0559</td>
<td><a href=”mailto:#”>turpis.Nulla@ac.edu</a></td>
<td>69446</td>

</tr>
<tr>
<td>11</td>
<td>Yael Owens</td>
<td>(465) 520-1801</td>
<td><a href=”mailto:#”>nunc.ac.mattis@enim.com</a></td>
<td>93872</td>

</tr>
<tr>
<td>12</td>
<td>Fletcher Briggs</td>
<td>(992) 962-9419</td>
<td><a href=”mailto:#”>amet.ante@lentesque.edu</a></td>
<td>87282</td>

</tr>
<tr>
<td>13</td>
<td>Maggy Murphy</td>
<td>(585) 210-0390</td>
<td><a href=”mailto:#”>eu@Integer.com</a></td>
<td>98081</td>

</tr>
<tr>
<td>14</td>
<td>Maggie Blake</td>
<td>(489) 101-5447</td>
<td><a href=”mailto:#”>rutrum.non.hendrerit@iaculis.org</a></td>
<td>85131</td>

</tr>
<tr>
<td>15</td>
<td>Ginger Bell</td>
<td>(934) 692-7294</td>
<td><a href=”mailto:#”>erat.in.conetuer@pedenout.org</a></td>
<td>78878</td>

</tr>
<tr>
<td>16</td>
<td>Iliana Ballard</td>
<td>(806) 835-7035</td>
<td><a href=”mailto:#”>vel.sapien@mi.ca</a></td>
<td>84718</td>

</tr>

<tr>
<td>50</td>
<td>Eden Burks</td>
<td>(576) 196-6013</td>
<td><a href=”mailto:#”>lorem@magna.com</a></td>
<td>30822</td>

</tr>
</tbody>
</table>

<script type=”text/javascript” src=”http://hangga.web.id/sorting/script.js”></script>
<script type=”text/javascript”>
var sorter = new TINY.table.sorter(“sorter”);
sorter.head = “head”;
sorter.asc = “asc”;
sorter.desc = “desc”;
sorter.even = “evenrow”;
sorter.odd = “oddrow”;
sorter.evensel = “evenselected”;
sorter.oddsel = “oddselected”;
sorter.paginate = true;
sorter.currentid = “currentpage”;
sorter.limitid = “pagelimit”;
sorter.init(“table”,1);
</script>
[/js]

Published in Coding Dunia IT JavaScript - Jquery Uncategorized

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.