Menyambung tulisan saya sebelumnya mengenai tabulasi data KPU dengan Ajax Client template. Halaman tersebut hanya berfungsi menampilkan data apa adanya dalam bentuk table. Dengan sedikit tambahan code dan plug-ins tablesorter, table yang ditambilkan dapat diurutkan dengan menekan klik pada header (No, Nama Parta dan Suara).
Hasil seletelah diurutkan berdasarkan jumlah suara.
Cukup dengan dua baris code tambahan berikut
<script type="text/javascript"
src="http://tablesorter.com/jquery.tablesorter.js">
</script>
dan
$('#tabulasi').tablesorter();
Dimana 'tabulasi' adalah id dari table yang digunakan. Code selengkapnya sebagai berikut.
<html>
<head>
<title>Tabulasi KPU dengan Ajax Client Template</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.js"></script>
<script type="text/javascript" src="MicrosoftAjax.js"></script>
<script type="text/javascript" src="MicrosoftAjaxTemplates.js"></script>
</head>
<body xmlns:sys="BLOCKED SCRIPTSys" xmlns:dataview="BLOCKED SCRIPTSys.UI.DataView" sys:activate="*">
<table id="tabulasi">
<thead>
<tr style="cursor:hand"><th>No</th><th>Nama Partai</th><th>Suara</th></tr>
<tbody sys:attach="dataview" class="sys-template" dataview:data="{{ d }}">
<tr>
<td>{{ no }}</td>
<td>{{ name }}</td>
<td>{{ value }}</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var d = [];
Sys.Observer.makeObservable(d);
$(document).ready(function() {
$.getJSON('http://jania.pe.kr/u/jsonp.cgi?url=http://tnp.kpu.go.id/tab2009/update/dataindex/nasional.txt&callback=?', function(eArgs) {
var i;
var e = Sys.Serialization.JavaScriptSerializer.deserialize(eArgs.content);
var vals = e.elements[0].values;
for(i=0; i < vals.length; i++) {
var _d = { no: e.x_axis.labels.labels
, value: vals.top.toString(), name: /\d{1,2}\s([a-zA-Z0-9\s\(\)]*)\x3Cbr\x3E/.exec(vals.tip)[1] };
d.add(_d);
}
$('#tabulasi').tablesorter();
});
});
</script>
</body>
Kita juga bisa tambahkan CSS untuk mempermanis tambilan table. Dokumentasi selengkapnya mengenai penggunakaan table-sorter dapat dilihat di http://tablesorter.com/docs/. Demo halaman dengan table-sorter dapat dilihat di http://tnp.masykur.web.id/client-template-tablesorter.html
Dengan kombinasi ASP.NET Ajax, jQuery dan plug-ins-nya kita bisa membuat halaman web yang ringan dan interaktif, dengan sedikit code.