CODEWITHSUNDEEP
phphtmltwitter-bootstrapcodeigniterpagination
Chief Makii
Chief Makii

Reputation: 121

Codeigniter 3 pagination class with bootstrap 4

Is Codeigniter 3 compatible with Bootstrap 4? or is it simply way too outdated to add any uses for bootstrap 4?

I've been looking at tutorials online on how to integrate bootstrap to Codeigniter pagination.

So far all i've seen is that they mostly changed the $config of the pagination class. For example:

//config for bootstrap pagination class integration
$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'] = '&laquo';
$config['prev_tag_open'] = '<li class="prev">';
$config['prev_tag_close'] = '</li>';
$config['next_link'] = '&raquo';
$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>';

I wanted a clear divide in my codes. Simply, I wanted less PHP in my HTML and more HTML there.

This is the Pagination code snippet in w3school bootstrap 4 tutorial.

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

How do I integrate the above code to my pagination class?

Do I have to do it the way the above tutorial did? or can I simply use a foreach loop in my HTML/view page to create the links depending on the records from the database?

Upvotes: 6

Views: 11719

Answers (5)

Insan Sutejo
Insan Sutejo

Reputation: 21

I have tried and succeeded 

//Style for BootStrap v4
    $config['next_link']        = 'Next';
    $config['prev_link']        = 'Prev';
    $config['first_link']       = false;
    $config['last_link']        = false;
    $config['full_tag_open']    = '<ul class="pagination justify-content-center">';
    $config['full_tag_close']   = '</ul>';
    $config['attributes']       = ['class' => 'page-link'];
    $config['first_tag_open']   = '<li class="page-item">';
    $config['first_tag_close']  = '</li>';
    $config['prev_tag_open']    = '<li class="page-item">';
    $config['prev_tag_close']   = '</li>';
    $config['next_tag_open']    = '<li class="page-item">';
    $config['next_tag_close']   = '</li>';
    $config['last_tag_open']    = '<li class="page-item">';
    $config['last_tag_close']   = '</li>';
    $config['cur_tag_open']     = '<li class="page-item active"><span class="page-link">';
    $config['cur_tag_close']    = '<span class="sr-only">(current)</span></span></li>';
    $config['num_tag_open']     = '<li class="page-item">';
    $config['num_tag_close']    = '</li>';

Screenshot

Upvotes: 2

Abdulla Nilam
Abdulla Nilam

Reputation: 38584

The code you added belongs to Bootstrap-3. Try this

$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 class="page-item">';
$config['first_tag_close'] = '</li>';
$config['prev_link'] = '&laquo';
$config['prev_tag_open'] = '<li class="page-item prev">';
$config['prev_tag_close'] = '</li>';
$config['next_link'] = '&raquo';
$config['next_tag_open'] = '<liclass="page-item">';
$config['next_tag_close'] = '</li>';
$config['last_tag_open'] = '<liclass="page-item">';
$config['last_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="page-item active"><a class="page-link">';
$config['cur_tag_close'] = '</a></li>';
$config['num_tag_open'] = '<li class="page-item">';
$config['num_tag_close'] = '</li>';

Upvotes: 5

Mon Mohon Singha
Mon Mohon Singha

Reputation: 64

Best solution

$config['full_tag_open']    = '<nav aria-label="Page navigation"><ul class="pagination">';
$config['full_tag_close']   = '</ul></nav>';
$config['num_tag_open']     = '<li class="page-item">';
$config['num_tag_close']    = '</li>';
$config['cur_tag_open']     = '<li class="page-item active"><span class="page-link">';
$config['cur_tag_close']    = '</span></li>';
$config['next_tag_open']    = '<li class="page-item">';
$config['next_tag_close']  = '</li>';
$config['prev_tag_open']    = '<li class="page-item">';
$config['prev_tag_close']  = '</li>';
$config['first_tag_open']   = '<li class="page-item">';
$config['first_tag_close'] = '</li>';
$config['last_tag_open']    = '<li class="page-item">';
$config['last_tag_close']  = '</li>';

then Add page-link class to a tag via jquery

    jquery('.page-item>a').addClass("page-link");

Upvotes: 2

Rodrigo Prazim
Rodrigo Prazim

Reputation: 858

The best. You have tried many, but this one is the one that best fit the page.

// Bootstrap 4, work very fine.
$config['full_tag_open'] = '<ul class="pagination">';
$config['full_tag_close'] = '</ul>';
$config['attributes'] = ['class' => 'page-link'];
$config['first_link'] = false;
$config['last_link'] = false;
$config['first_tag_open'] = '<li class="page-item">';
$config['first_tag_close'] = '</li>';
$config['prev_link'] = '&laquo';
$config['prev_tag_open'] = '<li class="page-item">';
$config['prev_tag_close'] = '</li>';
$config['next_link'] = '&raquo';
$config['next_tag_open'] = '<li class="page-item">';
$config['next_tag_close'] = '</li>';
$config['last_tag_open'] = '<li class="page-item">';
$config['last_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="page-item active"><a href="#" class="page-link">';
$config['cur_tag_close'] = '<span class="sr-only">(current)</span></a></li>';
$config['num_tag_open'] = '<li class="page-item">';
$config['num_tag_close'] = '</li>';

Upvotes: 18

Orion
Orion

Reputation: 125

This works for me

    // Bootstrap 4 Pagination fix
    $config['full_tag_open']    = '<div class="pagging text-center"><nav><ul class="pagination">';
    $config['full_tag_close']   = '</ul></nav></div>';
    $config['num_tag_open']     = '<li class="page-item"><span class="page-link">';
    $config['num_tag_close']    = '</span></li>';
    $config['cur_tag_open']     = '<li class="page-item active"><span class="page-link">';
    $config['cur_tag_close']    = '<span class="sr-only">(current)</span></span></li>';
    $config['next_tag_open']    = '<li class="page-item"><span class="page-link">';
    $config['next_tag_close']  = '<span aria-hidden="true"></span></span></li>';
    // $config['next_tag_close']  = '<span aria-hidden="true">&raquo;</span></span></li>';
    $config['prev_tag_open']    = '<li class="page-item"><span class="page-link">';
    $config['prev_tag_close']  = '</span></li>';
    $config['first_tag_open']   = '<li class="page-item"><span class="page-link">';
    $config['first_tag_close'] = '</span></li>';
    $config['last_tag_open']    = '<li class="page-item"><span class="page-link">';
    $config['last_tag_close']  = '</span></li>';

Upvotes: 2

Related Questions