<link rel="stylesheet" href="<?php echo base_url() ?>datatables/dataTables.bootstrap.css"/>
<script src="<?php echo base_url()?>datatables/jquery.dataTables.js"></script>
<script src="<?php echo base_url()?>datatables/dataTables.bootstrap.js"></script>
  
<div class="container">
	<h2>Master Variable Rumah Tangga</h2>
	<table class="table table-bordered table-hover" id="mytable">
		<thead>
			<tr>
				<th width="80px">No</th>
				<th>Nama Variable</th>
			</tr>
		</thead>
	</table>
</div>

<script type="text/javascript">
	$(document).ready(function() {
		$.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings)
		{
			return {
				"iStart": oSettings._iDisplayStart,
				"iEnd": oSettings.fnDisplayEnd(),
				"iLength": oSettings._iDisplayLength,
				"iTotal": oSettings.fnRecordsTotal(),
				"iFilteredTotal": oSettings.fnRecordsDisplay(),
				"iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
				"iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
			};
		};

		var t = $("#mytable").dataTable({
			
			initComplete: function() {
				var api = this.api();
				$('#mytable_filter input')
						.off('.DT')
						.on('keyup.DT', function(e) {
							if (e.keyCode == 13) {
								api.search(this.value).draw();
					}
				});
			},
			oLanguage: {
				sProcessing: "<div align='center'><h3>Loading...</h3></div>"
			},
			processing: true,
			serverSide: true,
			ajax: {"url": "<?php echo $this->uri->segment(1);?>/json", "type": "POST"},
			
			columns: [
				{
					"data": "ID",
					"orderable": false
				},
				{"data": "nama_variable"}
			],
			order: [[1, 'asc']],
			rowCallback: function(row, data, iDisplayIndex) {
				var info = this.fnPagingInfo();
				var page = info.iPage;
				var length = info.iLength;
				var index = page * length + (iDisplayIndex + 1);
				$('td:eq(0)', row).html(index);
			}
		});
	});
</script>

