ajax call in pagination on codeigniter

Question

I have a pagination like this in my controller :

<?php
$nama = $this->session->userdata('nama');
$start_row = $this->uri->segment(3);
$per_page = 5;

if (trim($start_row) == '') {
$start_row = 0;
};

$total_rows = $this->model_request->countPerUser($this->session->userdata('nama'));

$this->load->library('pagination');
$config['base_url'] = base_url() . 'control_closing/show';
$config['total_rows'] = $total_rows;
$config['per_page'] = $per_page;
$config['full_tag_open'] = '<div class="pagination pagination-centered"><ul>';
$config['full_tag_close'] = '</ul></div><!--pagination-->';
$config['first_link'] = false;
$config['last_link'] = false;
$config['first_tag_open'] = '<li>';
$config['first_tag_close'] = '</li>';
$config['prev_link'] = 'Prev';
$config['prev_tag_open'] = '<li class="prev">';
$config['prev_tag_close'] = '</li>';
$config['next_link'] = 'Next';
$config['next_tag_open'] = '<li>';
$config['next_tag_close'] = '</li>';
$config['last_tag_open'] = '<li>';
$config['last_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="active"><a href="#">';
$config['cur_tag_close'] = '</a></li>';
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';

$this->pagination->initialize($config);

$data['pagination'] = $this->pagination->create_links();
$request = $this->model_request->selectRequestPerUser($nama, $per_page, $start_row);

$data['data_request'] = $request;
$this->load->view('view_closing', $data);
?>

this is the modal :

public function selectRequestPerUser($nama_user, $limit, $start_row ) {
   $query = $this->db->get_where('tbl_requestfix', array('nama_user' => $nama_user), $limit, $start_row);
   return $query->result_array();
}

public function countPerUser($nama_user) {
  $query = $this->db->get_where('tbl_requestfix', array('nama_user' => $nama_user));
  return $query->num_rows();
}

I decided to divide my view into 2 file for better looking and easy maintenance.

This is the main view named view_closing :

<div class="container-fluid-full">
<div class="row-fluid">

    <?php $this->load->view('/include/sidebar_closing.php'); ?>

    <div id="content" class="span10">
        <ul class="breadcrumb">
            <li>
                <i class="icon-home"></i>
                <a href="<?php echo base_url() . 'control_member'; ?>">Home</a> 
                <i class="icon-angle-right"></i>
            </li>
            <li><a href="#">Closing</a></li>
        </ul>

        <div class="row-fluid sortable" id="isi">   
            <div class="box span12">
                <div class="box-header">
                    <h2><i class="halflings-icon align-justify"></i><span class="break"></span>Data Request</h2>
                    <div class="box-icon">
                        <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
                    </div>
                </div>
                <div class="box-content">
                    **<?php $this->load->view('view_closing_table'); ?>**
                </div>
            </div>
        </div>
    </div>
</div>

for table that linked with pagination named view_closing_table

<table class="table table-bordered table-striped table-condensed" id="table1">
<thead>
    <tr>
        <th>No.  </th>
        <th>No Request</th>
        <th>Kirim Request</th>
        <th>Keluhan</th>                                            
        <th>Status</th>
        <th>Approved by</th>
        <th>IT Handle</th>
        <th>Estimasi Penyelesaian</th>
        <th>Action</th>
    </tr>
</thead>   
<tbody>
    <?php
    $no = 1;
    foreach ($data_request as $data) {
        ?>
        <tr>
            <td class="center"><?php echo $no++ . ". "; ?> </td>

            <td class="sorting1" id='no_request' data-id-reseh="<?php echo $data['id_request']; ?>"><?php echo $data['kode_kantor'] . '/' . $data['kode_departement'] . '/' . date('m', strtotime($data['bulan'])) . '/' . $data['id_request']; ?></td>

            <td class="center"><?php echo date("d-m-Y, H:i ", strtotime($data['waktu_mulai'])); ?></td>

            <td class="center" id="description"><?php echo $data['keluhan']; ?></td>                                            

            <td class="center"><a href="#" id="status" name="status" class="linkStatus" ><span class="label label-success" ><?php echo $data['status_request']; ?> </span></a></td> 

            <td class="center"><?php echo $data['by_who'] ?></td>
            <td class="center"><?php echo $data['it_person'] ?></td>
            <td class="center"><?php
                if ($data['tanggal_estimasi'] != NULL) {
                    echo date("d-m-Y ", strtotime($data['tanggal_estimasi'])) . ', ' . date("H:i ", strtotime($data['jam_estimasi']));
                } else {
                    echo "";
                }
                ?></td>                                            
            <!-- Action-action -->
            <td  class="center" width="10px">
                <a class="btn btn-success" >
                    <i class="halflings-icon white print" id="print"></i>
                    Print
                </a>         
            </td>
        </tr>

    <?php } ?>
</tbody>

My problem is how to make the pagination when call the next or previous just refreshing the table not all the page. I think jquery ajax can do it. This is my code but unfortunatelly is not working.

$('.pagination ul li a').click(function(){
var this_url = $(this).attr("href");

$.post(this_url,{ }, function(data){
    ('div#table1').html(data);
    });
    return false;
});

Any help it so appriciated.

Answer 1

('div#table1').html(data); should be $('#table1').html(data);

Now it depends on what comes back in data .