everseiko/application/views/vAdminSellingout.php

<script>

$(document).ready(function() {
		$('#sellingouttab').dataTable();
		/*
		$('#cust').keyup(function(){
			if ($(this).val() != '') 
			{
			
				$.ajax({
				  url: 'form/searchcustomer/'+$(this).val(),
				  success: function(msg) 
				  {
				    var data;
					var sg = '[';
					data = jQuery.parseJSON(msg);
					for (var i = 0; i < data.length; i++)
					{
						sg = sg+'"'+data[i]['nama']+'", ';
					};
					sg=sg+']';
					$('#suggestion').css('display','block');
					if (msg != '""')
					{
						var data;
						var sg = '';
						data = jQuery.parseJSON(msg);
						for (var i = 0; i < data.length; i++)
						{
							sg = sg+data[i]['nama']+", ";
						};
						$('#suggestion').html('Suggestion : '+ sg);
						if (data.length==1)
						{
							//$('#cust').val(data[0]['nama'])
							//alert('found');
						}
					}
					else
					{
						$('#suggestion').html("Nothing Found");
					}
					
				  }
				});
			}
			else{$('#suggestion').css('display','none');}
		});	
		*/
		$('#cust').keyup(function(){
			$('#customer option').remove();
			if ($(this).val() != '') 
			{
				$.ajax({
				  url: 'form/searchcustomer/'+$(this).val(),
				  success: function(msg) 
				  {
				    if (msg != '""')
					{
						var data;
						data = jQuery.parseJSON(msg);
						for (var i = 0; i < data.length; i++)
						{
							var op = "<option>"+data[i]['nama']+"</option>"
							$(op).appendTo('#customer');
						};
					}
					else
					{
						var op = "<option>Nothing Found</option>"
						$(op).appendTo('#customer');
					}
					
				  }
				});
			}
		});	
	});
</script>
<div class="well-white">
  <div class="navbar">
	<div class="navbar-inner">
	  <a class="brand"><i class="icon-share-alt"></i> Selling Out</a>
	</div>
  </div>
</div>
<div class="well-white stafflist">
  <a data-toggle="modal" href="#myModal" class="btn pull-right" href=""><i class="icon-plus-sign"></i>Tambah</a>
  <br /><br />
  <table cellpadding="0" cellspacing="0" border="0" class="table display" id="sellingouttab">
	<thead>
	  <tr>
        <th><i class="icon-user"></i> Customer</th>
        <th><i class="icon-calendar"></i> Date</th>
        <th><i class=""></i> Quantity</th>
		<th><i class="icon-wrench"></i> Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
    	<td>everseiko</td>
        <td>January 2013</td>
        <td>5</td>
		<td align="center">
		  <!--<button class="btn btn-small btn-primary disabled">Edit</button>-->
		  <button class="btn btn-small btn-danger disabled">Delete</button>
		</td>
      </tr>
					
					<?php
                        foreach($sellout as $so){
                    ?>
                    	  <tr>
							<td><?php echo $so->customer; ?></td>
							<td><?php echo $so->bulan." ".$so->tahun; ?></td>
							<td><?php echo $so->qty; ?></td>
							<td align="center">
								<!--<button class="btn btn-small btn-primary">Edit</button>-->
								<button class="btn btn-small btn-danger" onclick="deleteUser('<?php //echo $puser->username; ?>')">Delete</button>
							</td>
                    	  </tr>
               		<?php } ?>	
					
    </tbody>
  </table>
</div>

<!--modal-->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
	<div class="modal-header">
	  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
	  <h3 id="myModalLabel">Add Selling Out</h3>
	</div>
	<form class="form-horizontal" action="<?php echo base_url(); ?>form/addSellout" method="post">
	<div class="modal-body">
	  <label class="control-label">ID Customer</label>
	  <div class="controls">
		<input type="text" placeholder="ID Customer" name="ID" id="idc">
	  </div><br />
	  <label class="control-label">Customer</label>
	  <div class="controls">
	  <!--
		<input type="text" placeholder="Customer Name" id="cust" name="customer">
		<div id="suggestion" style="display:none;margin-top:5px;"></div>
	  -->
	  <input list="customer" name="customer" id="cust" style="border-radius:4px;border: 1px solid #cccccc;">
	  <datalist id="customer"></datalist>
	  </div><br />
	  <label class="control-label">Period</label>
	  <div class="controls">
		<select name="bulan" style="width:120px;overflow:scroll">
		<option>---Month---</option>
		<option>January</option>
		<option>February</option>
		<option>March</option>
		<option>April</option>
		<option>Mei</option>
		<option>June</option>
		<option>July</option>
		<option>August</option>
		<option>September</option>
		<option>October</option>
		<option>November</option>
		<option>December</option>
		</select>
		<input type="number" name="tahun" style="width:80px;font-size:15px;padding:5px;" value="2012">
	  </div><br />
	  <label class="control-label">Quantity</label>
	  <div class="controls">
		<input type="number" placeholder="Quantity" name="qty" style="font-size:15px;padding:5px;">
	  </div>    	
	</div>
	<div class="modal-footer">
	  <button type="button" class="btn" data-dismiss="modal">Cancel</button>
	  <button type="submit" class="btn btn-primary">Save</button>
	</div>
	</form>
  </div>