CodeIgniter pagination customization

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



CodeIgniter pagination customization



I need to customize codeigniter pagination. Currently pagination on my site is working like this. (I am using CI pagination library)



Current Pagination



I want my pagination to look and work like this



Required Pagination



What can I do with codeigniter's pagination library for this?
Is there already any customized library on internet? Or I have to create my own?



My $config array is


$config['first_link'] = false;
$config['last_link'] = false;
$config ['prev_link'] = '<i class="fa fa-caret-left"></i>';
$config ['next_link'] = '<i class="fa fa-caret-right"></i>';
$config ['num_links'] = 2;
$config ['base_url'] = 'My base url';
$config ['total_rows'] = 50;
$config ["per_page"] = 10;
$config ["uri_segment"] = 4;
$config ['use_page_numbers'] = TRUE;





simply you have to apply css on current pagination and make it like required. Visit this link how-to-apply-css-styles-to-pagination-in-codeigniter
– Bhavin
Jul 20 '16 at 9:14






But how can I add " . . . " between the page numbers? like in " < 1 ... 4 5 6 .. 17 > "
– M Hussain
Jul 20 '16 at 9:33





edit your question with $config array's coding you have tried so far. then i can try something. and this answer is may be useful for you (stackoverflow.com/questions/20573882/…
– Bhavin
Jul 20 '16 at 9:50






thanks for your help but your referred question wasn't helpful. There was't any solution for this issue.
– M Hussain
Jul 20 '16 at 10:27




3 Answers
3



Finally I came up with the solution by extending CI pagination library.
Created new class Mypagination and overrided the default create_links() method.



Here is the code


class Mypagination extends CI_Pagination

function __construct()

parent::__construct();


public function create_links()

// If our item count or per-page total is zero there is no need to continue.
// Note: DO NOT change the operator to === here!
if ($this->total_rows == 0 OR $this->per_page == 0)

return '';


// Calculate the total number of pages
$num_pages = (int) ceil($this->total_rows / $this->per_page);

// Is there only one page? Hm... nothing more to do here then.
if ($num_pages === 1)

return '';


// Check the user defined number of links.
$this->num_links = (int) $this->num_links;

if ($this->num_links < 0)

show_error('Your number of links must be a non-negative number.');


// Keep any existing query string items.
// Note: Has nothing to do with any other query string option.
if ($this->reuse_query_string === TRUE)

$get = $this->CI->input->get();

// Unset the controll, method, old-school routing options
unset($get['c'], $get['m'], $get[$this->query_string_segment]);

else

$get = array();


// Put together our base and first URLs.
// Note: DO NOT append to the properties as that would break successive calls
$base_url = trim($this->base_url);
$first_url = $this->first_url;

$query_string = '';
$query_string_sep = (strpos($base_url, '?') === FALSE) ? '?' : '&amp;';

// Are we using query strings?
if ($this->page_query_string === TRUE)

// If a custom first_url hasn't been specified, we'll create one from
// the base_url, but without the page item.
if ($first_url === '')

$first_url = $base_url;

// If we saved any GET items earlier, make sure they're appended.
if ( ! empty($get))

$first_url .= $query_string_sep.http_build_query($get);



// Add the page segment to the end of the query string, where the
// page number will be appended.
$base_url .= $query_string_sep.http_build_query(array_merge($get, array($this->query_string_segment => '')));

else

// Standard segment mode.
// Generate our saved query string to append later after the page number.
if ( ! empty($get))

$query_string = $query_string_sep.http_build_query($get);
$this->suffix .= $query_string;


// Does the base_url have the query string in it?
// If we're supposed to save it, remove it so we can append it later.
if ($this->reuse_query_string === TRUE && ($base_query_pos = strpos($base_url, '?')) !== FALSE)

$base_url = substr($base_url, 0, $base_query_pos);


if ($first_url === '')

$first_url = $base_url.$query_string;


$base_url = rtrim($base_url, '/').'/';


// Determine the current page number.
$base_page = ($this->use_page_numbers) ? 1 : 0;

// Are we using query strings?
if ($this->page_query_string === TRUE)

$this->cur_page = $this->CI->input->get($this->query_string_segment);

else

// Default to the last segment number if one hasn't been defined.
if ($this->uri_segment === 0)

$this->uri_segment = count($this->CI->uri->segment_array());


$this->cur_page = $this->CI->uri->segment($this->uri_segment);

// Remove any specified prefix/suffix from the segment.
if ($this->prefix !== '' OR $this->suffix !== '')

$this->cur_page = str_replace(array($this->prefix, $this->suffix), '', $this->cur_page);



// If something isn't quite right, back to the default base page.
if ( ! ctype_digit($this->cur_page) OR ($this->use_page_numbers && (int) $this->cur_page === 0))

$this->cur_page = $base_page;

else

// Make sure we're using integers for comparisons later.
$this->cur_page = (int) $this->cur_page;


// Is the page number beyond the result range?
// If so, we show the last page.
if ($this->use_page_numbers)

if ($this->cur_page > $num_pages)

$this->cur_page = $num_pages;


elseif ($this->cur_page > $this->total_rows)

$this->cur_page = ($num_pages - 1) * $this->per_page;


$uri_page_number = $this->cur_page;

// If we're using offset instead of page numbers, convert it
// to a page number, so we can generate the surrounding number links.
if ( ! $this->use_page_numbers)

$this->cur_page = (int) floor(($this->cur_page/$this->per_page) + 1);


// Calculate the start and end numbers. These determine
// which number to start and end the digit links with.
$start = (($this->cur_page - $this->num_links) > 0) ? $this->cur_page - ($this->num_links - 1) : 1;
$end = (($this->cur_page + $this->num_links) < $num_pages) ? $this->cur_page + $this->num_links : $num_pages;

// And here we go...
$output = '';



// Render the "Previous" link.
if ($this->prev_link !== FALSE && $this->cur_page !== 1)

$i = ($this->use_page_numbers) ? $uri_page_number - 1 : $uri_page_number - $this->per_page;

$attributes = sprintf('%s %s="%d"', $this->_attributes, $this->data_page_attr, (int) $i);

if ($i === $base_page)

// First page
$output .= $this->prev_tag_open.'<a href="'.$first_url.'"'.$attributes.$this->_attr_rel('prev').'>'
.$this->prev_link.'</a>'.$this->prev_tag_close;

else

$append = $this->prefix.$i.$this->suffix;
$output .= $this->prev_tag_open.'<a href="'.$base_url.$append.'"'.$attributes.$this->_attr_rel('prev').'>'
.$this->prev_link.'</a>'.$this->prev_tag_close;




// Render the "First" link.
if ($this->first_link !== FALSE && $this->cur_page > ($this->num_links + 1 + ! $this->num_links))

// Take the general parameters, and squeeze this pagination-page attr in for JS frameworks.
$attributes = sprintf('%s %s="%d"', $this->_attributes, $this->data_page_attr, 1);

$output .= $this->first_tag_open.'<a href="'.$first_url.'"'.$attributes.$this->_attr_rel('start').'>'
.$this->first_link.'</a>'.$this->first_tag_close;



// Render the pages
if ($this->display_pages !== FALSE)

/*
* On page 4, show hidden page 2
*/
if($start == 4)
$start--;


/*
* On pages after 4, show dots before pages
*/
if(($start)>4)
$output .= '<div class="continues">. . .</div>';


/*
* On page 4th last, show hidden page 2nd last
*/
if($start == ($num_pages-3) && $start > 4)
$end++;


/*
* On last page, show hidden page 3rd last
*/
if($start == $num_pages && $start>3)
$start--;


/*
* On page 1, show hidden page 3
*/
if($start == 1 && $end < $num_pages-1)
$end++;


// Write the digit links
for ($loop = $start -1; $loop <= $end; $loop++)

$i = ($this->use_page_numbers) ? $loop : ($loop * $this->per_page) - $this->per_page;

$attributes = sprintf('%s %s="%d"', $this->_attributes, $this->data_page_attr, (int) $i);

if ($i >= $base_page)

if ($this->cur_page === $loop)

// Current page
$output .= $this->cur_tag_open.$loop.$this->cur_tag_close;

elseif ($i === $base_page)

// First page
$output .= $this->num_tag_open.'<a href="'.$first_url.'"'.$attributes.$this->_attr_rel('start').'>'
.$loop.'</a>'.$this->num_tag_close;

else

$append = $this->prefix.$i.$this->suffix;
$output .= $this->num_tag_open.'<a href="'.$base_url.$append.'"'.$attributes.$this->_attr_rel('start').'>'
.$loop.'</a>'.$this->num_tag_close;





/*
* On pages before last, show dots
*/
if($end < ($num_pages-1))
$output .= '<div class="continues">. . .</div>';




// Render the "Last" link
if ($this->last_link !== FALSE && ($this->cur_page + $this->num_links + ! $this->num_links) < $num_pages)

$i = ($this->use_page_numbers) ? $num_pages : ($num_pages * $this->per_page) - $this->per_page;

$attributes = sprintf('%s %s="%d"', $this->_attributes, $this->data_page_attr, (int) $i);

$output .= $this->last_tag_open.'<a href="'.$base_url.$this->prefix.$i.$this->suffix.'"'.$attributes.'>'
.$this->last_link.'</a>'.$this->last_tag_close;



// Render the "next" link
if ($this->next_link !== FALSE && $this->cur_page < $num_pages)

$i = ($this->use_page_numbers) ? $this->cur_page + 1 : $this->cur_page * $this->per_page;

$attributes = sprintf('%s %s="%d"', $this->_attributes, $this->data_page_attr, (int) $i);

$output .= $this->next_tag_open.'<a href="'.$base_url.$this->prefix.$i.$this->suffix.'"'.$attributes
.$this->_attr_rel('next').'>'.$this->next_link.'</a>'.$this->next_tag_close;




// Kill double slashes. Note: Sometimes we can end up with a double slash
// in the penultimate link so we'll kill all double slashes.
$output = preg_replace('#([^:])//+#', '\1/', $output);

// Add the wrapper HTML if exists
return $this->full_tag_open.$output.$this->full_tag_close;





I have added


/*
* my comments here
*/



styled comments before code where I made changes.



Use


$config['num_links'] = 4;



in your $config array.



Try CSS here is an example - once used this and it worked


.dataTables_wrapper .dataTables_info.dataTables_paginate .pagination,
.dataTables_wrapper .dataTables_paginate.dataTables_paginate .pagination
margin: 0;




.pagination
display: inline-block;
padding-left: 0;
margin: 17px 0;
border-radius: 3px;

.pagination > li
display: inline;

.pagination > li > a,
.pagination > li > span
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.42857143;
text-decoration: none;
color: #373e4a;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;

.pagination > li:first-child > a,
.pagination > li:first-child > span
margin-left: 0;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;

.pagination > li:last-child > a,
.pagination > li:last-child > span
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus
z-index: 2;
color: #818da2;
background-color: #eeeeee;
border-color: #ddd;

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus
z-index: 3;
color: #fff;
background-color: #373e4a;
border-color: #949494;
cursor: default;

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus
color: #999999;
background-color: #fff;
border-color: #ddd;
cursor: not-allowed;

.pagination-lg > li > a,
.pagination-lg > li > span
padding: 10px 16px;
font-size: 15px;
line-height: 1.3333333;

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;

.pagination-sm > li > a,
.pagination-sm > li > span
padding: 5px 10px;
font-size: 11px;
line-height: 1.5;

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;

.pager
padding-left: 0;
margin: 17px 0;
list-style: none;
text-align: center;

.pager li
display: inline;

.pager li > a,
.pager li > span
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;

.pager li > a:hover,
.pager li > a:focus
text-decoration: none;
background-color: #eeeeee;

.pager .next > a,
.pager .next > span
float: right;

.pager .previous > a,
.pager .previous > span
float: left;

.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span
color: #999999;
background-color: #fff;
cursor: not-allowed;





He asked how to customize pagination Not how to add library in your configuration.
– Bugfixer
Jul 20 '16 at 10:20





Thanks. But what are you trying to tell? I have loaded codeigniter pagination library and it is working fine. I just want to find a way to add dots " ... " for hidden page numbers
– M Hussain
Jul 20 '16 at 10:22






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Image
Clash Royale CLAN TAG #URR8PPP Firebase Auth - with Email and Password - Check user already registered I want to check when a user attempts to signup with createUserWithEmailAndPassword() in Firebase user Authentication method, this user is already registered with my app. createUserWithEmailAndPassword() 8 Answers 8 To detect whether a user with that email address already exists, you can detect when the call to createUserWithEmailAndPassword () fails with auth/email-already-in-use . I see that @Srinivasan just posted an answer for this. createUserWithEmailAndPassword () auth/email-already-in-use Alternatively, you can detect that an email address is already used by calling fetchSignInMethodsForEmail() (previous called fetchProvidersForEmail() ). fetchSignInMethodsForEmail() fetchProvidersForEmail() When the user trying to create an user with same email address, the task response will be "Response: The email address is already in use by another account." mFirebas...
Read more

Dynamically update html content plain JS

Image
Clash Royale CLAN TAG #URR8PPP Dynamically update html content plain JS So I have a script bound in my index.html, which literally has to fetch an array of jsons from an api, then dynamically update my page when get response. But as a result I'm getting an as the only update of my page. here is my script fetch(url) .then((resp) => resp.json()) .then((resp) => resp.results.forEach(item => fetch(item.url) .then((response)=> response.json()) .then((response) => pokeArr.push(response)) .catch(console.log) ) ).catch(console.log) const filler = () => if(!pokeArr) return 0 pokeArr.map((i,j)=> return `<tr>$i.name</tr>` ) const pokeindex = () => document.getElementById('a').appendChild(document.createElement(filler())) pokeindex() When I'm consoling it, I can see in the console all the responses I get, so I'm at least doing the fetching part right. What's parberakan ? What's pokeArr ? – T.J. Crowder Aug 8 at 12...
Read more

Creating a leaderboard in HTML/JS

Image
Clash Royale CLAN TAG #URR8PPP Creating a leaderboard in HTML/JS I'm trying to create a top 10 leaderboard, for now, I've only implemented 3 players, but I'm coming across an issue. My script doesn't seem to be outputting anything on webpage. The purpose of the script is to compare 3 arrays, player1,player2,and player3 solely based off of score. Which is the 2nd index of each array. I want the script to list the players in order of highest score. This method doesn't really seem to be efficient, especially when I'll have to add 7 more players. Could someone suggest perhaps an easier approach, as well as show me why my script wont output the info. Here's the JS function leaderboard() { var player1 = name:"Thomas",date:"01/23/18",score:"201"; var player2 = name:"Michael",date:"03/24/17",score:"943"; var player3 = Name:"Lisa",date:"06/04/18",Score:"79"; if(player1[2]...
Read more