Simple pagination in javascript

Question

I am trying to make pagination for my site   http   anuntorhei md    CODE   var someVar   50    function someStupidFunction             if  objJson length  gt  50                    document getElementById  nextPage   style visibility    visible                      if  someVar  lt   50                    document getElementById  prevPage   style visibility   hidden             else                   document getElementById  prevPage   style visibility    visible                 function nextPage             document getElementById  listingTable   innerHTML                if  someVar  lt  objJson length                    document getElementById  nextPage   style visibility    visible             else                   document getElementById  nextPage   style visibility    hidden                      for  var i   someVar - 50  i  lt  someVar  i                      document getElementById  listingTable   innerHTML    objJson i  adName     lt br gt                       someVar    50           document getElementById  prevPage   style visibility    visible       function prevPage             document getElementById  listingTable   innerHTML                if  someVar  gt  50                    document getElementById  prevPage   style visibility    visible             else                   document getElementById  prevPage   style visibility    hidden                      for  var i   someVar - 50  i  lt  someVar  i                      document getElementById  listingTable   innerHTML    objJson i  adName     lt br gt                       someVar -  50           document getElementById  nextPage   style visibility    visible       But I can t understand how to  hide  nextPage button when someVar is bigger than objJson length   And when I reach the  end   nextPage button disappear after than objJson is smaller than someVar  What is wrong in this code    How can I change it to make it perfect  Sorry for my bad English  can t explain all what I need  hope you understand what I need

User · Answer

A simple client-side pagination example where data is fetched only once at page loading.

_x000D_

// dummy data_x000D_
        const myarr = [{ "req_no": 1, "title": "test1" },_x000D_
        { "req_no": 2, "title": "test2" },_x000D_
        { "req_no": 3, "title": "test3" },_x000D_
        { "req_no": 4, "title": "test4" },_x000D_
        { "req_no": 5, "title": "test5" },_x000D_
        { "req_no": 6, "title": "test6" },_x000D_
        { "req_no": 7, "title": "test7" },_x000D_
        { "req_no": 8, "title": "test8" },_x000D_
        { "req_no": 9, "title": "test9" },_x000D_
        { "req_no": 10, "title": "test10" },_x000D_
        { "req_no": 11, "title": "test11" },_x000D_
        { "req_no": 12, "title": "test12" },_x000D_
        { "req_no": 13, "title": "test13" },_x000D_
        { "req_no": 14, "title": "test14" },_x000D_
        { "req_no": 15, "title": "test15" },_x000D_
        { "req_no": 16, "title": "test16" },_x000D_
        { "req_no": 17, "title": "test17" },_x000D_
        { "req_no": 18, "title": "test18" },_x000D_
        { "req_no": 19, "title": "test19" },_x000D_
        { "req_no": 20, "title": "test20" },_x000D_
        { "req_no": 21, "title": "test21" },_x000D_
        { "req_no": 22, "title": "test22" },_x000D_
        { "req_no": 23, "title": "test23" },_x000D_
        { "req_no": 24, "title": "test24" },_x000D_
        { "req_no": 25, "title": "test25" },_x000D_
        { "req_no": 26, "title": "test26" }];_x000D_
_x000D_
        // on page load collect data to load pagination as well as table_x000D_
        const data = { "req_per_page": document.getElementById("req_per_page").value, "page_no": 1 };_x000D_
_x000D_
        // At a time maximum allowed pages to be shown in pagination div_x000D_
        const pagination_visible_pages = 4;_x000D_
_x000D_
_x000D_
        // hide pages from pagination from beginning if more than pagination_visible_pages_x000D_
        function hide_from_beginning(element) {_x000D_
            if (element.style.display === "" || element.style.display === "block") {_x000D_
                element.style.display = "none";_x000D_
            } else {_x000D_
                hide_from_beginning(element.nextSibling);_x000D_
            }_x000D_
        }_x000D_
        _x000D_
        // hide pages from pagination ending if more than pagination_visible_pages_x000D_
        function hide_from_end(element) {_x000D_
            if (element.style.display === "" || element.style.display === "block") {_x000D_
                element.style.display = "none";_x000D_
            } else {_x000D_
                hide_from_beginning(element.previousSibling);_x000D_
            }_x000D_
        }_x000D_
        _x000D_
        // load data and style for active page_x000D_
        function active_page(element, rows, req_per_page) {_x000D_
            var current_page = document.getElementsByClassName('active');_x000D_
            var next_link = document.getElementById('next_link');_x000D_
            var prev_link = document.getElementById('prev_link');_x000D_
            var next_tab = current_page[0].nextSibling; _x000D_
            var prev_tab = current_page[0].previousSibling;_x000D_
            current_page[0].className = current_page[0].className.replace("active", "");_x000D_
            if (element === "next") {_x000D_
                if (parseInt(next_tab.text).toString() === 'NaN') {_x000D_
                    next_tab.previousSibling.className += " active";_x000D_
                    next_tab.setAttribute("onclick", "return false");_x000D_
                } else {_x000D_
                    next_tab.className += " active"_x000D_
                    render_table_rows(rows, parseInt(req_per_page), parseInt(next_tab.text));_x000D_
                    if (prev_link.getAttribute("onclick") === "return false") {_x000D_
                        prev_link.setAttribute("onclick", `active_page('prev',\"${rows}\",${req_per_page})`);_x000D_
                    }_x000D_
                    if (next_tab.style.display === "none") {_x000D_
                        next_tab.style.display = "block";_x000D_
                        hide_from_beginning(prev_link.nextSibling)_x000D_
                    }_x000D_
                }_x000D_
            } else if (element === "prev") {_x000D_
                if (parseInt(prev_tab.text).toString() === 'NaN') {_x000D_
                    prev_tab.nextSibling.className += " active";_x000D_
                    prev_tab.setAttribute("onclick", "return false");_x000D_
                } else {_x000D_
                    prev_tab.className += " active";_x000D_
                    render_table_rows(rows, parseInt(req_per_page), parseInt(prev_tab.text));_x000D_
                    if (next_link.getAttribute("onclick") === "return false") {_x000D_
                        next_link.setAttribute("onclick", `active_page('next',\"${rows}\",${req_per_page})`);_x000D_
                    }_x000D_
                    if (prev_tab.style.display === "none") {_x000D_
                        prev_tab.style.display = "block";_x000D_
                        hide_from_end(next_link.previousSibling)_x000D_
                    }_x000D_
                }_x000D_
            } else {_x000D_
                element.className += "active";_x000D_
                render_table_rows(rows, parseInt(req_per_page), parseInt(element.text));_x000D_
                if (prev_link.getAttribute("onclick") === "return false") {_x000D_
                    prev_link.setAttribute("onclick", `active_page('prev',\"${rows}\",${req_per_page})`);_x000D_
                }_x000D_
                if (next_link.getAttribute("onclick") === "return false") {_x000D_
                    next_link.setAttribute("onclick", `active_page('next',\"${rows}\",${req_per_page})`);_x000D_
                }_x000D_
            }_x000D_
        }_x000D_
_x000D_
        // Render the table's row in table request-table_x000D_
        function render_table_rows(rows, req_per_page, page_no) {_x000D_
            const response = JSON.parse(window.atob(rows));_x000D_
            const resp = response.slice(req_per_page * (page_no - 1), req_per_page * page_no)_x000D_
            $('#request-table').empty()_x000D_
            $('#request-table').append('<tr><th>Index</th><th>Request No</th><th>Title</th></tr>');_x000D_
            resp.forEach(function (element, index) {_x000D_
                if (Object.keys(element).length > 0) {_x000D_
                    const { req_no, title } = element;_x000D_
                    const td = `<tr><td>${++index}</td><td>${req_no}</td><td>${title}</td></tr>`;_x000D_
                    $('#request-table').append(td)_x000D_
                }_x000D_
            });_x000D_
        }_x000D_
_x000D_
        // Pagination logic implementation_x000D_
        function pagination(data, myarr) {_x000D_
            const all_data = window.btoa(JSON.stringify(myarr));_x000D_
            $(".pagination").empty();_x000D_
            if (data.req_per_page !== 'ALL') {_x000D_
                let pager = `<a href="#" id="prev_link" onclick=active_page('prev',\"${all_data}\",${data.req_per_page})>&laquo;</a>` +_x000D_
                    `<a href="#" class="active" onclick=active_page(this,\"${all_data}\",${data.req_per_page})>1</a>`;_x000D_
                const total_page = Math.ceil(parseInt(myarr.length) / parseInt(data.req_per_page));_x000D_
                if (total_page < pagination_visible_pages) {_x000D_
                    render_table_rows(all_data, data.req_per_page, data.page_no);_x000D_
                    for (let num = 2; num <= total_page; num++) {_x000D_
                        pager += `<a href="#" onclick=active_page(this,\"${all_data}\",${data.req_per_page})>${num}</a>`;_x000D_
                    }_x000D_
                } else {_x000D_
                    render_table_rows(all_data, data.req_per_page, data.page_no);_x000D_
                    for (let num = 2; num <= pagination_visible_pages; num++) {_x000D_
                        pager += `<a href="#" onclick=active_page(this,\"${all_data}\",${data.req_per_page})>${num}</a>`;_x000D_
                    }_x000D_
                    for (let num = pagination_visible_pages + 1; num <= total_page; num++) {_x000D_
                        pager += `<a href="#" style="display:none;" onclick=active_page(this,\"${all_data}\",${data.req_per_page})>${num}</a>`;_x000D_
                    }_x000D_
                }_x000D_
                pager += `<a href="#" id="next_link" onclick=active_page('next',\"${all_data}\",${data.req_per_page})>&raquo;</a>`;_x000D_
                $(".pagination").append(pager);_x000D_
            } else {_x000D_
                render_table_rows(all_data, myarr.length, 1);_x000D_
            }_x000D_
        }_x000D_
_x000D_
        //calling pagination function_x000D_
        pagination(data, myarr);_x000D_
_x000D_
_x000D_
        // trigger when requests per page dropdown changes_x000D_
        function filter_requests() {_x000D_
            const data = { "req_per_page": document.getElementById("req_per_page").value, "page_no": 1 };_x000D_
            pagination(data, myarr);_x000D_
        }

_x000D_

.box {_x000D_
 float: left;_x000D_
 padding: 50px 0px;_x000D_
}_x000D_
_x000D_
.clearfix::after {_x000D_
 clear: both;_x000D_
 display: table;_x000D_
}_x000D_
_x000D_
.options {_x000D_
 margin: 5px 0px 0px 0px;_x000D_
 float: left;_x000D_
}_x000D_
_x000D_
.pagination {_x000D_
 float: right;_x000D_
}_x000D_
_x000D_
.pagination a {_x000D_
 color: black;_x000D_
 float: left;_x000D_
 padding: 8px 16px;_x000D_
 text-decoration: none;_x000D_
 transition: background-color .3s;_x000D_
 border: 1px solid #ddd;_x000D_
 margin: 0 4px;_x000D_
}_x000D_
_x000D_
.pagination a.active {_x000D_
 background-color: #4CAF50;_x000D_
 color: white;_x000D_
 border: 1px solid #4CAF50;_x000D_
}_x000D_
_x000D_
.pagination a:hover:not(.active) {_x000D_
 background-color: #ddd;_x000D_
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<div>_x000D_
    <table id="request-table">_x000D_
   </table>_x000D_
</div>_x000D_
_x000D_
<div class="clearfix">_x000D_
 <div class="box options">_x000D_
  <label>Requests Per Page: </label>_x000D_
      <select id="req_per_page" onchange="filter_requests()">_x000D_
   <option>5</option>_x000D_
   <option>10</option>_x000D_
   <option>ALL</option>_x000D_
  </select>_x000D_
 </div>_x000D_
 <div class="box pagination">_x000D_
 </div>_x000D_
</div>

_x000D_

User · Answer

I created a class structure for collections in general that would meet this requirement  and it looks like this   class Collection        constructor             this collection               this index   0             log             return console log this collection              push value            return this collection push value              pushAll    values            return this collection push    values              pop             return this collection pop               shift             return this collection shift               unshift value            return this collection unshift value              unshiftAll    values            return this collection unshift    values              remove index            return this collection splice index  1              add index  value            return this collection splice index  0  value              replace index  value            return this collection splice index  1  value              clear             this collection length   0             isEmpty             return this collection length     0             viewFirst             return this collection 0              viewLast             return this collection this collection length - 1              current            if  this index  lt   this collection length - 1   amp  amp   this index  gt   0                return this collection this index                     else              return  Object index exceeds collection range                         next             this index            this index  gt  this collection length - 1   this index   0   this index          return this collection this index              previous            this index--          this index  lt  0    this index   this collection length-1    this index          return this collection this index                and essentially what you would do is have a collection of arrays of whatever length for your pages pushed into the class object  and then use the next   and previous   functions to display whatever  page   index  you wanted to display  Would essentially look like this   let books   new Collection    let firstPage -    dummyData      dummyData      dummyData      dummyData      dummyData      let secondPage -    dumberData      dumberData      dumberData      dumberData      dumberData      books pushAll firstPage  secondPage      loads each array individually books current      display firstPage books next      display secondPage

User · Answer

Just create and save a page token in global variable with window nextPageToken  Send this to API server everytime you make a request and have it return the next one with response and you can easily keep track of last token  The below is an example how you can move forward and backward from search results  The key is the offset you send to API based on the nextPageToken that you have saved  function getPrev       var offset   Number window nextPageToken  - limit   2    if  offset  lt  0        offset   0        window nextPageToken   offset    if  canSubmit searchForm  offset         searchForm submit           function getNext       var offset   Number window nextPageToken     window nextPageToken   offset    if  canSubmit searchForm  offset         searchForm submit

User · Answer

i am assuming you will display 10 data in every page  HTML -   lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt pagination lt  title gt       lt link rel  stylesheet   href  pathofcssfile css  gt   lt  head gt   lt body gt       lt div gt           lt table id  user  gt  lt  table gt       lt  div gt       lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt       lt ul gt       lt li value  1  gt 1 lt  li gt       lt li value  2  gt 2 lt  li gt       lt li value  3  gt 3 lt  li gt       lt li value  4  gt 4 lt  li gt       lt li value  5  gt 5 lt  li gt       lt li value  6  gt 6 lt  li gt       lt li value  7  gt 7 lt  li gt       lt li value  8  gt 8 lt  li gt       lt li value  9  gt 9 lt  li gt       lt li value  10  gt 10 lt  li gt        lt  ul gt        lt script src  pathnameofjsfile js  type  text javascript  gt  lt  script gt   lt  body gt   lt  html gt    JS -  var xhr   new XMLHttpRequest    xhr open  GET   https   jsonplaceholder typicode com albums  true   xhr send     var udata   xhr onload   function          if this status    200                 var userdata   JSON parse this responseText           console log userdata           udata   userdata          data 1               li   click function             var a     this  attr  value    console log  value li    a   data a        function data a          var output           for i   a-1  10  i lt  a 10  i                  output     lt tr gt                       lt td gt    udata i  userId     lt  td gt                       lt td gt    udata i  id     lt  td gt                       lt td gt    udata i  title     lt  td gt      lt br gt                      lt  tr gt              document getElementById  user   innerHTML   output      CSS -  ul  display  flex  list-style-type none  padding  20px     li  padding  20px     td tr      padding  10px

User · Answer

Below is the pagination logic as a function   function Pagination pageEleArr  numOfEleToDisplayPerPage        this pageEleArr   pageEleArr      this numOfEleToDisplayPerPage   numOfEleToDisplayPerPage      this elementCount   this pageEleArr length      this numOfPages   Math ceil this elementCount   this numOfEleToDisplayPerPage       const pageElementsArr   function  arr  eleDispCount            const arrLen   arr length          const noOfPages   Math ceil arrLen   eleDispCount           let pageArr               let perPageArr               let index   0          let condition   0          let remainingEleInArr   0           for  let i   0  i  lt  noOfPages  i                   if  i     0                    index   0                  condition   eleDispCount                            for  let j   index  j  lt  condition  j                      perPageArr push arr j                              pageArr push perPageArr               if  i     0                    remainingEleInArr   arrLen - perPageArr length                else                   remainingEleInArr   remainingEleInArr - perPageArr length                             if  remainingEleInArr  gt  0                    if  remainingEleInArr  gt  eleDispCount                        index   index   eleDispCount                      condition   condition   eleDispCount                    else                       index   index   perPageArr length                      condition   condition   remainingEleInArr                                              perPageArr                         return pageArr            this display   function  pageNo            if  pageNo  gt  this numOfPages    pageNo  lt   0                return -1            else               console log  Inside else loop in display method                console log pageElementsArr this pageEleArr  this numOfEleToDisplayPerPage                console log pageElementsArr this pageEleArr  this numOfEleToDisplayPerPage  pageNo - 1                return pageElementsArr this pageEleArr  this numOfEleToDisplayPerPage  pageNo - 1                      const p1   new Pagination   a    b    c    d    e    f    g    3   console log p1 elementCount   console log p1 pageEleArr   console log p1 numOfPages   console log p1 numOfEleToDisplayPerPage   console log p1 display 3

User · Answer

So you can use a library for pagination logic https   github com pagino pagino-js

User · Answer

file icons svg   lt svg aria-hidden  true  style  position  absolute  width  0  height  0  overflow  hidden   version  1 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  gt   lt defs gt   lt symbol id  icon-triangle-left  viewBox  0 0 20 20  gt   lt title gt triangle-left lt  title gt   lt path d  M14 5v10l-9-5 9-5z  gt  lt  path gt   lt  symbol gt   lt symbol id  icon-triangle-right  viewBox  0 0 20 20  gt   lt title gt triangle-right lt  title gt   lt path d  M15 10l-9 5v-10l9 5z  gt  lt  path gt   lt  symbol gt   lt  defs gt   lt  svg gt    file  style css    results  btn--prev      float  left      flex-direction  row-reverse       results  btn--next      float  right      file index html    lt body gt   lt form class  search  gt                   lt input type  text  class  search  field  placeholder  Search over 1 000 000 recipes     gt                   lt button class  btn search  btn  gt                       lt svg class  search  icon  gt                           lt use href  img icons svg icon-magnifying-glass  gt  lt  use gt                       lt  svg gt                       lt span gt Search lt  span gt                   lt  button gt               lt  form gt        lt div class  results  gt            lt ul class  results  list  gt            lt  ul gt            lt div class  results  pages  gt            lt  div gt        lt  div gt   lt  body gt    file  searchView js  export const element         searchForm document querySelector   search        searchInput  document querySelector   search  field        searchResultList  document querySelector   results  list        searchRes document querySelector   results        searchResPages document querySelector   results  pages      export const getInput        gt  element searchInput value  export const clearResults        gt       element searchResultList innerHTML         element searchResPages innerHTML       export const clearInput       gt  element searchInput value        const limitRecipeTitle    title  limit 17   gt       const newTitle           if title length gt limit           title split      reduce  acc  cur   gt               if acc cur length  lt   limit                   newTitle push cur                             return acc cur length            0              return    newTitle join              const renderRecipe   recipe   gt       const markup              lt li gt               lt a class  results  link  href     recipe recipe id   gt                   lt figure class  results  fig  gt                       lt img src    recipe image url   alt    limitRecipeTitle recipe title    gt                   lt  figure gt                   lt div class  results  data  gt                       lt h4 class  results  name  gt   recipe title  lt  h4 gt                       lt p class  results  author  gt   recipe publisher  lt  p gt                   lt  div gt               lt  a gt           lt  li gt             var htmlObject   document createElement  div        htmlObject innerHTML   markup      element searchResultList insertAdjacentElement  beforeend  htmlObject      const createButton    page  type   gt         lt button class  btn-inline results  btn--  type   data-goto   type      prev   page-1   page 1  gt       lt svg class  search  icon  gt           lt use href  img icons svg icon-triangle-  type      prev    left     right     gt  lt  use gt       lt  svg gt       lt span gt Page   type      prev   page-1   page 1  lt  span gt       lt  button gt    const renderButtons    page  numResults  resultPerPage   gt       const pages   Math ceil numResults resultPerPage       let button      if page    1  amp  amp  pages  gt 1             button to go to next page         button   createButton page   next         else if page lt pages           both buttons         button             createButton page   prev            createButton page   next                  else if  page     pages  amp  amp  pages  gt  1             Only button to go to prev page         button   createButton page   prev               element searchResPages insertAdjacentHTML  afterbegin   button     export const renderResults    recipes  page 1  resultPerPage 10    gt           recipes foreach el  gt renderRecipe el         or foreach will automatically call the render recipes       recipes forEach renderRecipe        const start    page-1  resultPerPage      const end   page   resultPerPage      recipes slice start  end  forEach renderRecipe       renderButtons page  recipes length  resultPerPage        file  Search js  export default class Search      constructor query           this query   query            async getResults            try              const res   await axios  https   api com api search  amp q   this query                 this result   res data recipes                console log this result            catch error               alert error                       file  Index js  onst state       const controlSearch   async    gt     const query   searchView getInput      if  query       state search   new Search query        searchView clearResults        searchView clearInput        await state search getResults        searchView renderResults state search result           event listner to the parent object to delegate the event element searchForm addEventListener  submit   event  gt     console log  submit search      event preventDefault      controlSearch         element searchResPages addEventListener  click   e  gt     const btn   e target closest   btn-inline      if btn       const goToPage   parseInt btn dataset goto  10    base 10     searchView clearResults        searchView renderResults state search result  goToPage

User · Answer

You can use the code from this minimal plugin  https   www npmjs com package paginator-js  Array prototype paginate   function pageNumber  itemsPerPage     pageNumber     Number pageNumber    itemsPerPage   Number itemsPerPage    pageNumber      pageNumber    lt  1    isNaN pageNumber       1   pageNumber   itemsPerPage    itemsPerPage  lt  1    isNaN itemsPerPage     1   itemsPerPage    var start         pageNumber - 1    itemsPerPage    var end         start   itemsPerPage   var loopCount   0   var result            data          end  false        for loopCount   start  loopCount  lt  end  loopCount         this loopCount   amp  amp  result data push this loopCount           if loopCount    this length       result end   true        return result

User · Answer

I ll address any questions you have    but here is an improved pattern you should follow to reduce code duplication   As a sidenote though  you should consider not doing pagination on client-side  Since if you have a huge dataset  it would mean you need to download all the data before your page loads  Better to implement server-side pagination instead   Fiddle  http   jsfiddle net Lzp0dw83   HTML   lt div id  listingTable  gt  lt  div gt   lt a href  javascript prevPage    id  btn prev  gt Prev lt  a gt   lt a href  javascript nextPage    id  btn next  gt Next lt  a gt  page   lt span id  page  gt  lt  span gt    Javascript  put anywhere    var current page   1  var records per page   2   var objJson           adName   AdName 1          adName   AdName 2          adName   AdName 3          adName   AdName 4          adName   AdName 5          adName   AdName 6          adName   AdName 7          adName   AdName 8          adName   AdName 9          adName   AdName 10         Can be obtained from another source  such as your objJson variable  function prevPage         if  current page  gt  1            current page--          changePage current page            function nextPage         if  current page  lt  numPages              current page            changePage current page            function changePage page        var btn next   document getElementById  btn next        var btn prev   document getElementById  btn prev        var listing table   document getElementById  listingTable        var page span   document getElementById  page            Validate page     if  page  lt  1  page   1      if  page  gt  numPages    page   numPages         listing table innerHTML            for  var i    page-1    records per page  i  lt   page   records per page   i              listing table innerHTML    objJson i  adName     lt br gt              page span innerHTML   page       if  page    1            btn prev style visibility    hidden         else           btn prev style visibility    visible              if  page    numPages              btn next style visibility    hidden         else           btn next style visibility    visible            function numPages         return Math ceil objJson length   records per page      window onload   function         changePage 1        UPDATE 2014 08 27  There is a bug above  where the for loop errors out when a particular page  the last page usually  does not contain records per page number of records  as it tries to access a non-existent index   The fix is simple enough  by adding an extra checking condition into the for loop to account for the size of objJson   Updated fiddle  http   jsfiddle net Lzp0dw83 1   for  var i    page-1    records per page  i  lt   page   records per page   amp  amp  i  lt  objJson length  i

User · Answer

Following is the Logic which accepts count from user and performs pagination in Javascript  It prints alphabets  Hope it helps    Thankyou    x000D   x000D     x000D        x000D  USER INPUT   NUMBER OF SUGGESTIONS  x000D        x000D     x000D   x000D  var recordSize   prompt  please  enter the Record Size    x000D  console log recordSize   x000D   x000D   x000D     x000D        x000D  POPULATE SUGGESTIONS IN THE suggestion set LIST  x000D        x000D     x000D  var suggestion set       x000D  counter   0  x000D   x000D  asscicount   65  x000D  do  x000D  if asscicount  lt   90   x000D   var temp   String fromCharCode asscicount   x000D   suggestion set push temp   x000D   asscicount    1       x000D   else  x000D   asscicount   65  x000D   var temp   String fromCharCode asscicount   x000D   suggestion set push temp    x000D   asscicount    1       x000D    x000D  counter    1  x000D   while counter  lt  recordSize   x000D   x000D  console log suggestion set    x000D   x000D   x000D   x000D     x000D        x000D  LOGIC FOR PAGINATION x000D        x000D     x000D   x000D  var totalRecords   recordSize  pageSize   6  x000D  var q   Math floor totalRecords pageSize   x000D  var r   totalRecords pageSize  x000D  var itr   1  x000D   x000D  if r  0   r  1   r  2    x000D  itr q  x000D    x000D  else   x000D  itr q 1  x000D    x000D  console log itr   x000D   x000D  var output       pageCnt 1  newPage false  x000D   x000D  if totalRecords  lt   pageSize 2    x000D  output      n   x000D   x000D   for var i 0  i  lt  totalRecords  i     x000D    output    suggestion set i      t   x000D     x000D    x000D   x000D  else   x000D   output      n   x000D   for var i 0  i lt totalRecords  i      x000D      output     i 1      t   x000D    if pageCnt  1   x000D    output    suggestion set i      t   x000D    if  i 1    pageSize 1     x000D    output     Next      t   x000D    pageCnt    x000D    newPage true  x000D     x000D    x000D  else   x000D  if newPage    x000D  output      n     Previous      t   x000D  newPage   false  x000D    x000D  output    suggestion set i      t   x000D  if  i 1    pageSize pageCnt 1   amp  amp   pageSize pageCnt 1  lt totalRecords    x000D  if  i 2      pageSize pageCnt 2   amp  amp  pageCnt  itr    x000D  output     suggestion set i    1      t   x000D  break  x000D    x000D  else   x000D  output     Next      t   x000D  pageCnt    x000D  newPage true  x000D    x000D    x000D    x000D    x000D    x000D  console log output   x000D   x000D   x000D

[javascript] Simple pagination in javascript

Examples related to javascript

[javascript] Simple pagination in javascript

Examples related to javascript

Examples related to pagination