Ajax Paging in codeigniter - php

Question

I use codeigniter pagination also here i use ajax to search so that the paging does not works. While click the paging link the full page is get reloaded .Actually i am not familiar with ajax so i dont know how this problem can be solved.Any help is appreciated.
Controller
public function chrgs_ajs_result()
{
$type = $this->input->post('catg');
$sdate = $this->input->post('start_date');
$edate = $this->input->post('end_date');
$result['error'] = "";
$result['res'] = "";
$result['res'] = $this->chrgs_edit_report_model->get_edit_amount($type,$sdate,$edate);
$config['base_url'] = base_url() . 'index.php/payment_edit/chrgs_ajs_result';
$config['total_rows'] = count($result['res']);
$config['per_page'] = 15;
$config["uri_segment"] = 3;
$this->pagination->initialize($config);
$page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
$result['res'] = $this->chrgs_edit_report_model->get_edit_amount($type,$sdate,$edate,$config["per_page"], $page);
$result["links"] = $this->pagination->create_links();
//$result['res'] = $this->chrgs_edit_report_model->get_edit_amount($type,$sdate,$edate);
// echo "<pre>";
// print_r($result['res']);
if (!empty($result['res']))
{
$this->load->view('edit_charg_ajax_result',$result);
}
else
{
echo "No Result Found";
}
}
Ajax Result page
<table border="1" class="mainTable" cellpadding="0" cellspacing="0">
<tr> <?php if (isset($links)) { echo $links; } ?> </tr>
<tr style="background-color:#F2FAFF;color:#660">
<td width="3%">Sl No</td>
<td width="8%">Track Number</td>
<td width="8%">Old <?php echo $type; ?></td>
<td width="8%">New <?php echo $type; ?></td>
<td width="30%">Reason</td>
<td width="10%">Date</td>
<td width="10%">Requested By</td>
<td width="10%">Approved By</td>
<td width="10%">Approved IP</td>
</tr>
<?php
$i = 1;
foreach ($res as $value)
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $value['track_no']; ?></td>
<td><?php echo $value['old_value']; ?></td>
<td><?php echo $value['new_value']; ?></td>
<td><?php echo $value['reason']; ?></td>
<td><?php echo $value['added_on']; ?></td>
<td><?php echo $value['requested_by']; ?></td>
<td><?php echo $value['approved_by']; ?></td>
<td><?php echo $value['ip']; ?></td>
</tr>
<?php
$i++;
} ?>
Main Result page
<section>
<div class="content">
<div class="row">
<div class="col-md-12" style="margin-left: 2%;">
<div class="box">
<form class="form-horizontal" id="form">
<fieldset>
<div class="box-body">
<div class="col-md-12 row div1">
<div class="form-group col-md-4" style="margin-left: 80px;">
<label style="margin-top: 20px;"><b>Types:</b></label>
<div class="input-group" id="error">
<select class="form-control" id="catg" name="catg" style="width: 134%; border-radius: 5px;">
<option value="">--Select--</option>
<option value="charges">Charges</option>
<option value="delivery_at">Delivery_at</option>
<option value="doc_country">Doc_country</option>
<option value="doctype">Doctype</option>
<option value="mfa">Mfa</option>
<option value="package">Package</option>
<option value="sub_package">Sub_package</option>
</select>
</div>
</div>
<div class="form-group col-md-3" >
<label class="lmarg"><b>Start Date:</b></label>
<div class="input-group">
<div class="input-group-addon"> <i class="fa fa-calendar"></i> </div>
<input type="text" name="start_date" id="start_date" class="form-control datepicker">
</div>
</div>
<div class="form-group col-md-3" style="margin-left: 2px;">
<label class="lmarg"><b>End Date:</b></label>
<div class="input-group">
<div class="input-group-addon"> <i class="fa fa-calendar"></i> </div>
<input type="text" name="end_date" id="end_date" class="form-control datepicker">
</div>
</div>
<div class="form-group">
<label label class="lmarg" style="visibility: hidden;">search</label>
<div class="col-md-1 input-group">
<input type="button" class="btn pull-right" id="search_charge_edit" value="search">
</div>
</div>
</div>
</div>
</fieldset>
</form>
<div style="margin-top: 3%;margin-right: 1%;">
<div id="result" ></div>
</div></div>
</div>
</div>
</div>
$("#search_charge_edit").on("click",function(){
var controller_function = "<?php echo base_url();?>index.php/payment_edit/chrgs_ajs_result";
var post_data = $("#form").serialize();
$.ajax({
type:"post",
url:controller_function,
data:post_data,
success:function(data)
{
//alert(data);
//$('#form').trigger("reset");
$('#result').html(data);
}
});
});