php jquery pagination expanding without moving to the next page - php

Question

Im working on a codeigniter project which takes results and adds it to the page with pagination.
The problem that im having is,
the page shows all the page numbers but the first page always seems empty. When i move to the second page it shows the first page results along with the second page results. Even if i move to the first page again its empty.
when i move further, all the results seems to be stacked rather than paginating.
so first page 0 results. the second page shows 30, 3rd page shows 45 results.
below is my script
<script type="text/javascript">
$(document).ready(function(){
function loading_show(){
$('#loading').html("<img src='<?php echo $url?>images/loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function loadData(page){
loading_show();
$.ajax
({
type: "POST",
url: "<?php echo base_url()?>index.php/controls/ajaxload",
data: "page="+page,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1);
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter Number '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
});
</script>
php code
function ajaxload()
{
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
$city ='London';
$this->load->model('control_model');
$query_pag_datas = $this->control_model->data_for_pagination($start, $per_page,$city);
$msg = "";
foreach ($query_pag_datas as $single):
$htmlmsg = htmlentities($single['Description']);
$msg .= "<li><b>" . $single['offID'] . "</b> " . $htmlmsg . "</li>";
endforeach;
$msg = "<div class='data'><ul>" . $msg . "</ul></div>";
$count = $this->control_model->count_pages($city);
$no_of_paginations = ceil($count / $per_page);
if ($cur_page >= 7) {
$start_loop = $cur_page - 3;
if ($no_of_paginations > $cur_page + 3)
$end_loop = $cur_page + 3;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
$start_loop = $no_of_paginations - 6;
$end_loop = $no_of_paginations;
} else {
$end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 7)
$end_loop = 7;
else
$end_loop = $no_of_paginations;
}
$msg .= "<div class='pagination'><ul>";
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
$msg .= "<li p='1' class='inactive'>First</li>";
}
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
$msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {
if ($cur_page == $i)
$msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
else
$msg .= "<li p='$i' class='active'>{$i}</li>";
}
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
$msg .= "<li class='inactive'>Next</li>";
}
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
$msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
$total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>";
echo $msg;
}
}
any help will be appreciated.

Answer 1

So if the page you are posting is 1, this is what you get:
Page 1:
$page = $_POST['page'];//let's say we're posting page 1, so $page === 1
...
$page -= 1;//so now, page === 0
...
$start = $page * $per_page;//which, since math, will be 0
...
$query_pag_datas = $this->control_model->data_for_pagination($start, $per_page,$city);
// you just called data_for_pagination(0, 15, 'London')
Since we can't see the data_for_pagination method, I'm going to assume that this first parameter is the number of results you are requesting. This makes sense because as the page number increases, the number of results will increase:
Page 2:
$page = $_POST['page'];//let's say we're posting page 2, so $page === 2
...
$page -= 1;//so now, page === 1
...
$start = $page * $per_page;//which, since math, will be 15
...
$query_pag_datas = $this->control_model->data_for_pagination($start, $per_page,$city);
// you just called data_for_pagination(15, 15, 'London')
Page 3:
$page = $_POST['page'];//let's say we're posting page 3, so $page === 3
...
$page -= 1;//so now, page === 2
...
$start = $page * $per_page;//which, since math, will be 30
...
$query_pag_datas = $this->control_model->data_for_pagination($start, $per_page,$city);
// you just called data_for_pagination(30, 15, 'London')
Hope that helps.

Answer 2

change
$page -= 1;
to
$page = ($page > 0 ) ? $page -1 : 0 ;
in the first click page is 0
so
0-1 => -1
-1 * 15 => -15 ;
your first offset is -15 !