Surprise! We've been running on hardware provided by BuyVM for a few months and wanted to show them a little appreciation.
Running a paste site comes with unique challenges, ones that aren't always obvious and hard to control. As such, BuyVM offered us a home where we could worry less about the hosting side of things and focus on maintaining a clean and useful service! Go check them out and show them some love!
Description: ajaxsidoarjo
Submitted on May 14, 2016 at 03:33 PM

Section 1 (Text)

<!DOCTYPE html>
<html>
    <head> 
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Ajax CRUD with Bootstrap modals and Datatables</title>
		<link href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css')?>" rel="stylesheet">
		<link href="<?php echo base_url('assets/datatables/css/dataTables.bootstrap.css')?>" rel="stylesheet">
		<link href="<?php echo base_url('assets/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')?>" rel="stylesheet">
		<link href="<?php echo base_url('assets/datatables/css/jquery.dataTables.yadcf.css')?>" rel="stylesheet">
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head> 
	<body>
		<div class="container">
			<h1 style="font-size:20pt">Ajax CRUD with Bootstrap modals and Datatables</h1>
			
			<h3>Person Data</h3>
			<br />
			<button class="btn btn-success" onclick="add_person()"><i class="glyphicon glyphicon-plus"></i> Add Person</button>
			<button class="btn btn-default" onclick="reload_table()"><i class="glyphicon glyphicon-refresh"></i> Reload</button>
			<br />
			<br />
			
			<table id="table" class="table table-striped table-bordered telek" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>ID</th>
						<th>First Name</th>
						<th>Last Name</th>
						<th>Gender</th>
						<th>Address</th>
						<th>Date of Birth</th>
						<th style="width:125px;">Action</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
				
				<tfoot>
					<tr>
						<th>ID</th>
						<th>First Name</th>
						<th>Last Name</th>
						<th>Gender</th>
						<th>Address</th>
						<th>Date of Birth</th>
						<th>Action</th>
					</tr>
				</tfoot>
			</table>
		</div>
		
		<script src="<?php echo base_url('assets/jquery/jquery-2.1.4.min.js')?>"></script>
		<script src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js')?>"></script>
		<script src="<?php echo base_url('assets/datatables/js/jquery.dataTables.min.js')?>"></script>
		<script src="<?php echo base_url('assets/datatables/js/dataTables.bootstrap.js')?>"></script>
		<script src="<?php echo base_url('assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js')?>"></script>
		<script src="<?php echo base_url('assets/datatables/js/jquery.dataTables.yadcf.js')?>"></script>
		
		
		<script type="text/javascript">
			
			var save_method; //for save method string
			var table;
			
			$(document).ready(function() {
				
				//datatables
				table = $('#table').DataTable({ 
					
					"processing": true, //Feature control the processing indicator.
					"serverSide": true, //Feature control DataTables' server-side processing mode.
					"order": [], //Initial no order.
					
					// Load data for the table's content from an Ajax source
					"ajax": {
						"url": "<?php echo site_url('person/ajax_list')?>",
						"type": "POST"
					},
					

					initComplete: function () {
						this.api().columns().every(function () {
							var column = this;
							var input = document.createElement("input");
							$(input).appendTo($(column.footer()).empty())
							.on('change', function () {
								column.search($(this).val(), false, false, true).draw();
							});
						});
					},
					
				});
				
				
				
				
				//datepicker
				$('.datepicker').datepicker({
					autoclose: true,
					format: "yyyy-mm-dd",
					todayHighlight: true,
					orientation: "top auto",
					todayBtn: true,
					todayHighlight: true,  
				});
				
			});
			
			
			
			function add_person()
			{
				save_method = 'add';
				$('#form')[0].reset(); // reset form on modals
				$('.form-group').removeClass('has-error'); // clear error class
				$('.help-block').empty(); // clear error string
				$('#modal_form').modal('show'); // show bootstrap modal
				$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
			}
			
			function edit_person(id)
			{
				save_method = 'update';
				$('#form')[0].reset(); // reset form on modals
				$('.form-group').removeClass('has-error'); // clear error class
				$('.help-block').empty(); // clear error string
				
				//Ajax Load data from ajax
				$.ajax({
					url : "<?php echo site_url('person/ajax_edit/')?>/" + id,
					type: "GET",
					dataType: "JSON",
					success: function(data)
					{
						
						$('[name="id"]').val(data.id);
						$('[name="firstName"]').val(data.firstName);
						$('[name="lastName"]').val(data.lastName);
						$('[name="gender"]').val(data.gender);
						$('[name="address"]').val(data.address);
						$('[name="dob"]').datepicker('update',data.dob);
						$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
						$('.modal-title').text('Edit Person'); // Set title to Bootstrap modal title
						
					},
					error: function (jqXHR, textStatus, errorThrown)
					{
						alert('Error get data from ajax');
					}
				});
			}
			
			function reload_table()
			{
				table.ajax.reload(null,false); //reload datatable ajax 
			}
			
			function save()
			{
				$('#btnSave').text('saving...'); //change button text
				$('#btnSave').attr('disabled',true); //set button disable 
				var url;
				
				if(save_method == 'add') {
					url = "<?php echo site_url('person/ajax_add')?>";
					} else {
					url = "<?php echo site_url('person/ajax_update')?>";
				}
				
				// ajax adding data to database
				$.ajax({
					url : url,
					type: "POST",
					data: $('#form').serialize(),
					dataType: "JSON",
					success: function(data)
					{
						
						if(data.status) //if success close modal and reload ajax table
						{
							$('#modal_form').modal('hide');
							reload_table();
						}
						
						$('#btnSave').text('save'); //change button text
						$('#btnSave').attr('disabled',false); //set button enable 
						
						
					},
					error: function (jqXHR, textStatus, errorThrown)
					{
						alert('Error adding / update data');
						$('#btnSave').text('save'); //change button text
						$('#btnSave').attr('disabled',false); //set button enable 
						
					}
				});
			}
			
			function delete_person(id)
			{
				if(confirm('Are you sure delete this data?'))
				{
					// ajax delete data to database
					$.ajax({
						url : "<?php echo site_url('person/ajax_delete')?>/"+id,
						type: "POST",
						dataType: "JSON",
						success: function(data)
						{
							//if success reload ajax table
							$('#modal_form').modal('hide');
							reload_table();
						},
						error: function (jqXHR, textStatus, errorThrown)
						{
							alert('Error deleting data');
						}
					});
					
				}
			}
			
			
		</script>
		
		<script type="text/javascript">
			
			
			
		</script>
		
		<!-- Bootstrap modal -->
		<div class="modal fade" id="modal_form" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h3 class="modal-title">Person Form</h3>
					</div>
					<div class="modal-body form">
						<form action="#" id="form" class="form-horizontal">
							<input type="hidden" value="" name="id"/> 
							<div class="form-body">
								<div class="form-group">
									<label class="control-label col-md-3">First Name</label>
									<div class="col-md-9">
										<input name="firstName" placeholder="First Name" class="form-control" type="text">
										<span class="help-block"></span>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">Last Name</label>
									<div class="col-md-9">
										<input name="lastName" placeholder="Last Name" class="form-control" type="text">
										<span class="help-block"></span>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">Gender</label>
									<div class="col-md-9">
										<select name="gender" class="form-control">
											<option value="">--Select Gender--</option>
											<option value="male">Male</option>
											<option value="female">Female</option>
										</select>
										<span class="help-block"></span>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">Address</label>
									<div class="col-md-9">
										<textarea name="address" placeholder="Address" class="form-control"></textarea>
										<span class="help-block"></span>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">Date of Birth</label>
									<div class="col-md-9">
										<input name="dob" placeholder="yyyy-mm-dd" class="form-control datepicker" type="text">
										<span class="help-block"></span>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
						<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<!-- End Bootstrap modal -->
		
		<script>
		</script>
	</body>
</html>