Custom css for paging in codeigniter

12,438

In the $config array passed into the pagination initialize() method, you can set the number of links to display on either side of the current page with num_links:

$config['num_links'] = 2;

From the CI user guide:

The number of "digit" links you would like before and after the selected page number. For example, the number 2 will place two digits on either side, as in the example links at the very top of this page.

That should get you closer to exactly what you want. I don't know the exact HTML generated by this library, so if you post it maybe someone can give you a CSS solution. You could also look into extending the CI pagination library to suit you needs (check out "Extending Native Libraries").

Share:
12,438
Beni kurniawan
Author by

Beni kurniawan

Updated on June 04, 2022

Comments

  • Beni kurniawan
    Beni kurniawan almost 2 years

    I need a little help here,

    I want using paging CodeIgniter.

    Here my piece code for showing the paging.

        $this->load->library("pagination");
        $config = array();
        $key = $this->input->get_post('qfront');
        $config["base_url"] = base_url() . "source/";
        $config["total_rows"] = $this->fetch_count($key)->count;
        $config["per_page"] = 10;
        $choice = $config["total_rows"] / $config["per_page"];
        $config["uri_segment"] = 2;
        $config["num_links"] = round($choice);
        $config['full_tag_open'] = '<div class="pagination"><ul>';
        $config['full_tag_close'] = '</ul></div><!--pagination-->';
    
        $config['first_link'] = '&laquo; First';
        $config['first_tag_open'] = '<li class="prev page">';
        $config['first_tag_close'] = '</li>';
    
        $config['last_link'] = 'Last &raquo;';
        $config['last_tag_open'] = '<li class="next page">';
        $config['last_tag_close'] = '</li>';
    
        $config['next_link'] = 'Next &rarr;';
        $config['next_tag_open'] = '<li class="next page">';
        $config['next_tag_close'] = '</li>';
    
        $config['prev_link'] = '&larr; Previous';
        $config['prev_tag_open'] = '<li class="prev page">';
        $config['prev_tag_close'] = '</li>';
    
        $config['cur_tag_open'] = '<li class="active"><a href="">';
        $config['cur_tag_close'] = '</a></li>';
    
        $config['num_tag_open'] = '<li class="page">';
        $config['num_tag_close'] = '</li>';
        $this->pagination->initialize($config);
        $page = ($this->uri->segment(2)) ? $this->uri->segment(2) : 0;
        $data["results"] = $this->fetch_result($config["per_page"], $page, $key);
        $data["links"] = $this->pagination->create_links();
        $data["key"] = $key;
        $this->load->view("page", $data);
    

    in my view :

    <?php echo $links; ?>
    

    And what I got is enter image description here

    How can I make like <-prev 1 2 3 4 5 . . . 200 next->

    Is it possible? Or maybe a little nice css