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

时间:2017-12-29 13:01:07

标签: jquery ajax codeigniter

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

我的控制器代码在

之下
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<br />
                    <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);
           }
        });
}); 

我得到的输出就像这个enter image description here

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

您需要传递click事件,然后取消默认链接。

https://api.jquery.com/event.preventdefault/

// pass event to click function
$(".cl").live("click", function (event) {

    // prevent link being followed.
    event.preventDefault();

    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);
       }
    });
});