101 lines
2.7 KiB
HTML
101 lines
2.7 KiB
HTML
|
<script src="js/jquery.datatables.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="css/jquery-ui-1.10.3.css">
|
||
|
|
<script src="js/jquery-ui-1.10.3.min.js"></script>
|
||
|
|
<link href="css/jquery.dataTables.min.css" rel="stylesheet">
|
||
|
|
<script>
|
||
|
|
$(document).ready(function() {
|
||
|
|
$('#example').DataTable({
|
||
|
|
paging: false,
|
||
|
|
searching: false,
|
||
|
|
ordering: false,
|
||
|
|
select: true,
|
||
|
|
info: false
|
||
|
|
});
|
||
|
|
|
||
|
|
/*$('#example tbody').on( 'click', 'tr', function () {
|
||
|
|
if ( $(this).hasClass('selected') ) {
|
||
|
|
$(this).removeClass('selected');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
table.$('tr.selected').removeClass('selected');
|
||
|
|
$(this).addClass('selected');
|
||
|
|
}
|
||
|
|
} );*/
|
||
|
|
} );
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
var availableTags = [
|
||
|
|
"Gambir - Jakarta",
|
||
|
|
"Senen - Jakarta",
|
||
|
|
"Kemayoran - Jakarta",
|
||
|
|
"Balapan - Solo",
|
||
|
|
"Stasiun Kota - Solo"
|
||
|
|
];
|
||
|
|
$( "#stasiun" ).autocomplete({
|
||
|
|
source: availableTags
|
||
|
|
});
|
||
|
|
$( "#stasiun2" ).autocomplete({
|
||
|
|
source: availableTags
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.ui-autocomplete>.ui-menu-item{background-color:#fff;}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="container" style="margin-top:50px;clear:both;">
|
||
|
|
<form class="form-horizontal" role="form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="control-label col-sm-1" for="stasiun">Asal:</label>
|
||
|
|
<div class="col-sm-8">
|
||
|
|
<input type="text" class="form-control" id="stasiun" placeholder="Asal">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="control-label col-sm-1" for="stasiun2">Tujuan:</label>
|
||
|
|
<div class="col-sm-8">
|
||
|
|
<input type="Text" class="form-control" id="stasiun2" placeholder="Tujuan">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="col-sm-1">
|
||
|
|
<button type="submit" class="btn btn-default" id="carika">Cari</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div style="margin-top:50px" align="left">
|
||
|
|
|
||
|
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Name</th>
|
||
|
|
<th>Position</th>
|
||
|
|
<th>Office</th>
|
||
|
|
<th>Age</th>
|
||
|
|
<th>Start date</th>
|
||
|
|
<th>Salary</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Tiger Nixon</td>
|
||
|
|
<td>System Architect</td>
|
||
|
|
<td>Edinburgh</td>
|
||
|
|
<td>61</td>
|
||
|
|
<td>2011/04/25</td>
|
||
|
|
<td>$320,800</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Garrett Winters</td>
|
||
|
|
<td>Accountant</td>
|
||
|
|
<td>Tokyo</td>
|
||
|
|
<td>63</td>
|
||
|
|
<td>2011/07/25</td>
|
||
|
|
<td>$170,750</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</div>
|