如何在codeigniter中应用ajax分页进行过滤搜索

我已经在页面上完成了我的过滤器搜索和显示记录，但是现在我想在页面上添加带有过滤数据的分页，我已经在我的控制器和视图页面中完成了关于分页的代码，每当我点击第二个数字页面时都会刷新，单击分页号后我不想刷新页面 .

我的控制器代码如下

public function filtersearch()
    {
        $proSearch = implode(",", $_POST['search']) ;
        $cat = $_POST['cat'];
        log_message('error', 'post value is  '.$proSearch );
        log_message('error', 'subcat  '.$cat );
        $config = array();
        $config['page_query_string'] = TRUE;
        $config['query_string_segment'] = 'offset';
        $config["base_url"] = base_url() . "products";
        if (!is_null($cat)) 
        $config['base_url'] = $config['base_url'].'/'.$cat;

        $config['base_url'] = $config['base_url'].'/?';

        $config["total_rows"] = $this->Star_model->getfilterCount($proSearch,$cat);
        $config["per_page"] = 1;
        $config["uri_segment"] = 4;

        $config['full_tag_open'] = '<ul class="pagination">';
        $config['full_tag_close'] = '</ul>';
        $config['first_link'] = false;
        $config['last_link'] = false;
        $config['first_tag_open'] = '<li>';
        $config['first_tag_close'] = '</li>';
        $config['prev_link'] = '«';
        $config['prev_tag_open'] = '<li class="prev">';
        $config['prev_tag_close'] = '</li>';
        $config['next_link'] = '»';
        $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);
        $this->pagination->initialize($config);


        $offset = $this->input->get('offset');

        $data['search'] = $this->Star_model->getfilterSearch($proSearch,$cat,$config["per_page"], $offset);
$output = null;
            foreach ($data['search'] as $productrows)
            {

                $output .= "<li><a href='#'>
                    <img src='../uploads/products/$productrows->featured_img' /></a>
                <div class='head'>$productrows->prod_name

                    <img src='../starassets/images/rupee.jpg'/> 
                    <span>$productrows->sale_price</span>
                </div>
            </li>";
            }
echo $this->pagination->create_links();
            echo $output;
            }

我在ajax响应中传递数据，代码在下面

$(".cl").live("click", function () {
        var val = $('input[type=checkbox]:checked').map(function(_, el) {
        return $(el).val();
    }).get();
        var cat = $("#sub_cat").val();
            $.ajax({
            type: "POST",
            url: '<?php echo base_url();?>star/filtersearch',
            data: {search: val, cat: cat},
            success:function(data){
            $("#prd").html(data);
           }
        });
});

我得到像这样的输出

我怎么解决这个问题？