Is it possible to do this pagination without backg

Question

I'm trying to implement server side pagination like datetable and I found backbone.paginator library, I don't know if there is something else.

Through their examples they used another library to help accomplishing this which is backgrid.js and its paginator plugin

Is it possible to do this pagination without Backgrid? Could you please add any example on this?

Answer 1

I did it

in the View initialize function

I call

this.reloadCustomPages();

here its implementation

reloadCustomPages: function(options) {
    var self = this;
    self.block();
    self.customPages.fetch({data: $.param(options)}).always(function () {
        self.unblock();
    });
}

in the server side (java spring) I modified the api to accept new query strings

@RequestParam(value = "pageNumber", defaultValue = "1"),
@RequestParam(value = "perPage", defaultValue = "10")

and instead of returning the list directly it returns useful pagination info like

• total number of items in database
• current page nuber
• page size
• and the items itself

check this server-side snippet (I know it's not related but worthy to look at)

@RequestMapping(value = "/editor/pages", method = RequestMethod.GET)
public void listPages(@RequestParam(value = "pageNumber", defaultValue = "1") Integer pageNumber,
                          @RequestParam(value = "perPage", defaultValue = "10") Integer perPage,
                          HttpServletResponse httpResp) throws IOException {

    Long recordsTotal = pageSvc.findTotalNumberOfPages();// select count(*) from table_name    
    List<PbCustomPage> pages = pageSvc.findPages(pageNumber, perPage);// server side query that gets a pagenated data 

    BackbonePaginatorResponse response = new BackbonePaginatorResponse();// I created this simple class 
    response.setTotalCount(recordsTotal);
    response.setPageNumber(pageNumber);
    response.setPerPage(perPage);
    response.setItems(pages);

    httpResp.setContentType("application/json");
    json.createCustomPageSerializer().addProperties().serialize(response, httpResp.getWriter());// just make your server send that obkect
}

now back the function call it will till the server to get page 1 with a page size of 10

in my template, I have this

<div class="pagination clear" style="text-align: center;">
    <%= customPages.paginationHtml %>
</div>

let me tell you how I populate it

customPages.paginationHtml = this.generatePagination(customPages);

and here is the most important part

generatePagination: function (paginationResponse) {
    var currentPage = paginationResponse.pageNumber,
        lastPage = paginationResponse.totalCount==0?1:Math.ceil(paginationResponse.totalCount/paginationResponse.perPage);
    var html = '<ul class="pagination">';
    html += '<li class="'+(currentPage == 1?"disabled":"")+'" data-pb-page-number="1"><a href="#" class="first">&laquo;&laquo;</a></li>';
    html += '<li class="'+(currentPage == 1?"disabled":"")+'" data-pb-page-number="'+(currentPage==1?1:currentPage-1)+'"><a href="#" class="prev">&laquo;</a></li>';


    for (var i = 1; i <= lastPage; i++) {
         html += '<li class="'+(currentPage == i?"active":"")+'" data-pb-page-number="'+i+'"><a href="#" class="page">'+ i +'</a></li>';
    }

    html += '<li class="'+(lastPage == currentPage?"disabled":"")+'" data-pb-page-number="'+(currentPage==lastPage?lastPage:currentPage+1)+'"><a href="#" class="next">&raquo;</a></li>';
    html += '<li class="'+(lastPage == currentPage?"disabled":"")+'" data-pb-page-number="'+(lastPage)+'"><a href="#" class="last">&raquo;&raquo;</a></li>';

    html += '</ul>';
    return html;
},

each li I create it has data-pb-page-number to be used later

one more thing, how to make new requests to other pages

in the View initialize function

this.el.on('click', 'ul.pagination li:not(.disabled,.active)', this.getCustomPagesPagination);

here its implementation

getCustomPagesPagination: function (e) {
    e.preventDefault();
    var $el = $(e.target).closest("li");
    this.reloadCustomPages({pageNumber:$el.data("pb-page-number")})
},

the the result is like this

this how I solved my problem but the question still not answered

Answer 2

I developed the following code to share with you A JS/php code that do server site pagination and you could change it according to your need and later i may summarize it better.

First make connection to DB and create pagination table:

  CREATE TABLE `pagination` (
 `id` INT( 16 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
 `name` VARCHAR( 50 ) NOT NULL ,
 `age` INT( 3 ) NOT NULL ,
 `company` VARCHAR( 50 ) NOT NULL
  ) 

Second insert 400 same records :

   $i=0;
   while ($i< 400){
   $pag="insert into pagination (id,name,age,company) VALUES 
  ('NULL','john','40','google')";
  $excu=$mysqli->query($pag);
   $i++;
       }

Then make test.php

 <!DOCTYPE html>
 <html><head>
 <style>
 #container{overflow-x: hidden;max-width:90%;min-width:90% ;margin: 0 auto;}
 td{max-width:10%;min-width:10%}
 tr,td{border:1px solid black }
 #page{display:inline;border:1px solid black}
 #numb,#numbs{display:none}
.button{background:white}
 </style>
 </head>
 <body >
 <?php $defaultoption ="10";?>
 <div id=container></div><span id=numb></span><span id=numbs><?php echo 
 $defaultoption;?></span>
 <script type=text/javascript  src=js.js></script>
 </body>
 </html>

Then make js.js :

  onload = function (){ 
  var container=document.getElementById("container");
  var table =document.getElementById("numbs").innerHTML;
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {

  container.innerHTML=xhttp.responseText;
 var button=document.getElementById("button");
 button.children[0].disabled="true";
 button.children[0].style.background="yellow";
             }}  
 xhttp.open("POST", "testa.php", true);
 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("table="+table);
    }      


 function select(){
 var sel =document.getElementById("select");
 var table=sel.options[sel.selectedIndex].value;
 var b2 =document.getElementById("numbs");
 b2.innerHTML=table;
 var se = new XMLHttpRequest();
 se.onreadystatechange = function() {
  if (se.readyState == 4 && se.status == 200) {
  document.getElementById("container").innerHTML=se.responseText;
  var button=document.getElementById("button");
  button.children[0].disabled="true";
   button.children[0].style.background="yellow";

       }}  
   se.open("POST", "testa.php", true);
   se.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   se.send("table="+table);
   }





   function button(button){
   var b2 =document.getElementById("numbs");
   var b1 =button.innerHTML;
   var numb = document.getElementById("numb"); 
   numb.innerHTML=b1;
   var b= b2.innerHTML; 
   var butt = new XMLHttpRequest();
     butt.onreadystatechange = function() {
   if (butt.readyState == 4 && butt.status == 200) {

  document.getElementById("container").innerHTML=butt.responseText;
  var d = document.getElementsByClassName("button");
  for(i=0;i<d.length;i++){
  if(d[i].innerHTML == numb.innerHTML){d[i].disabled="true";
  d[i].style.background="yellow";
    }}}}

  butt.open("POST", "testa.php", true);
  butt.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   butt.send("b="+b+"&b1="+b1);
  }

Make testa.php :

  <?php
  $pag="SELECT * FROM pagination ORDER BY id ASC ";
  $exc=$mysqli->query($pag);
  $numrwos =mysqli_num_rows($exc);
  if($_POST['b']){
  $b =$_POST['b'];
  $b1 =$_POST['b1'];
  $max=($b*$b1);
  $m =($b1-1);
  $n =($m*$b);
  $min =($n-1);
  if($numrwos){
  echo "<select id=select onchange=select()><option selected=selected>Show Entries</option>";
  if($numrwos < 11){
  echo "<option>10</option>";
  }elseif($numrwos > 10 && $numrwos < 26){
  echo "<option>10</option><option>25</option>"; }elseif($numrwos > 25 && 
  $numrwos < 51){
  echo "<option>10</option><option>25</option><option>50</option>";}else{
  echo "<option>10</option><option>25</option><option>50</option>
  <option>100</option>";}
  echo "</select><br />";
  echo "<table width=80% id=table>";
  echo "<tr><td width=10%>id</td><td>name</td><td>age</td><td>company</td></tr>";
  $stop="0";
  while ($result=mysqli_fetch_array($exc)){
  if($stop > $min && $stop < $max){
  echo "<tr><td>".$result['id']."</td><td>".$result['name']."</td>
  <td>".$result['age']."</td><td>".$result['company']."</td></tr>";
  }else{}
  $stop++;
 }echo "</table><br />";
  echo "<div id=button>";
  $i=0;
  while($i < $numrwos){
  $page+=$i % $b == $b-1;
  $i++;
  if($i%$b == 1){
  $pagenum=$page+1;
  echo "<button class=button onmouseover='button(this)'>".$pagenum."</button>";}}
 echo "</div>";
 }else{echo "no records";}

 }else{
 $t =$_POST["table"];
 if($numrwos){
 echo "<select id=select onchange=select()><option selected=selected>Show Entries</option>";
 if($numrwos < 11){
 echo "<option>10</option>";
 }elseif($numrwos > 10 && $numrwos < 26){
 echo "<option>10</option><option>25</option>"; }elseif($numrwos > 25 && $numrwos < 51){
  echo "<option>10</option><option>25</option><option>50</option>";}else{
  echo "<option>10</option><option>25</option><option>50</option>
  <option>100</option>";}
  echo "</select><br />";
  echo"<table width=80% id=table>";
   echo "<tr><td width=10%>id</td><td>name</td><td>age</td><td>company</td></tr>";
  $stop="0";
  while ($result=mysqli_fetch_array($exc)){
  echo "<tr><td>".$result['id']."</td><td>".$result['name']."</td>
   <td>".$result['age']."</td><td>".$result['company']."</td></tr>";
  if($stop ==$t-1){break;}
  $stop++;
  }echo "</table><br />";
  echo "<div id=button>";
  $i=0;
  while($i < $numrwos){
  $page+=$i % $t == $t-1;
   $i++;
  if($i%$t == 1){
  $pagenum=$page+1;
   echo "<button class=button onmouseover='button(this)'>".$pagenum."</button>";}}
 echo "</div>";
  }else{echo "no records";}
  } 
  ?>

I wish that help you .