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 |
|
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 :
|
0 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 |
<link rel="stylesheet" href="https://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="https://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> |