How to use pagination on HTML tables

Question

I am trying to use this Pagination library in my HTML table page  specifically light theme  but somehow I am not able to understand how to plugin this library in such a way in my HTML page so that I can have pagination code working in my HTML table    Right now  I have HTML table without any pagination code working so my below HTML code will show you a table with all the rows in one page which is not what I want      I want to show 6 items in my table in one page by using above pagination javascript   And as soon as I click on second pagination tab  it should show me next six items and keep on going until it is finished    Below is my full HTML code in which I have tried using the same above pagination javascript but it doesn t work for me     lt html gt   lt head gt    lt script src  http   code jquery com jquery-1 9 1 min js  gt  lt  script gt   lt script src     jquery simplePagination js  gt  lt  script gt   lt link href     simplePagination css  rel  stylesheet  type  text css    gt         lt style type  text css  gt  table       width  40em      margin  2em auto             thead       background   000      color   fff             td       width  10em      padding  0 3em             tbody       background   ccc              lt  style gt        lt script gt   function test pageNumber       var page   page-id-  pageNumber        select   hide       page  show        lt  script gt    lt  head gt    lt body bgcolor   F8F8F8  gt       lt table class  paginated  gt           lt thead gt               lt tr gt                   lt th gt A lt  th gt                    lt th gt B lt  th gt                    lt th gt C lt  th gt                    lt th gt D lt  th gt               lt  tr gt           lt  thead gt            lt tbody gt               lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt                lt tr gt                   lt td gt 1 lt  td gt                    lt td gt 2 lt  td gt                    lt td gt 3 lt  td gt                    lt td gt 4 lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt    lt div id  choose  gt   lt  div gt         lt script language  javascript  gt        function                 choose   pagination               items  20              itemsOnPage  2              cssStyle   light-theme               onPageClick  function pageNumber  test pageNumber                            lt  script gt        lt  body gt   lt  html gt    Any simple jsfiddle example basis on my above HTML code and also combined with above pagination javascript will help me understand better in how to imlement this js on the HTML tables    Thanks for the help    NOTE -  I am only interested in simplePagination js solution only which I am currently trying to implement

User · Answer

With Reference to Anusree answer above and with respect,I am tweeking the code little bit to make sure it works in most of the cases.

Created a reusable function paginate('#myTableId') which can be called any number times for any table.
Adding code inside ajaxComplete function to make sure paging is called once table using jquery is completely loaded. We use paging mostly for ajax based tables.
Remove Pagination div and rebind on every pagination call
Configuring Number of rows per page

Code:

$(document).ready(function () {
    $(document).ajaxComplete(function () {
        paginate('#myTableId',10);
        function paginate(tableName,RecordsPerPage) {
            $('#nav').remove();
            $(tableName).after('<div id="nav"></div>');
            var rowsShown = RecordsPerPage;
            var rowsTotal = $(tableName + ' tbody tr').length;
            var numPages = rowsTotal / rowsShown;
            for (i = 0; i < numPages; i++) {
                var pageNum = i + 1;
                $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
            }
            $(tableName + ' tbody tr').hide();
            $(tableName + ' tbody tr').slice(0, rowsShown).show();
            $('#nav a:first').addClass('active');
            $('#nav a').bind('click', function () {

                $('#nav a').removeClass('active');
                $(this).addClass('active');
                var currPage = $(this).attr('rel');
                var startItem = currPage * rowsShown;
                var endItem = startItem + rowsShown;
                $(tableName + ' tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
                    css('display', 'table-row').animate({ opacity: 1 }, 300);
            });
        }
    });
});

User · Answer

Many times we might want to perform Table pagination using jquery Here i ll give you the answer and reference link  Jquery      document  ready function                data   after   lt div id  nav  gt  lt  div gt             var rowsShown   4          var rowsTotal       data tbody tr   length          var numPages   rowsTotal rowsShown          for i   0 i  lt  numPages i                  var pageNum   i   1                  nav   append   lt a href     rel    i    gt   pageNum   lt  a gt                            data tbody tr   hide                data tbody tr   slice 0  rowsShown  show                nav a first   addClass  active                nav a   bind  click   function                     nav a   removeClass  active                  this  addClass  active                var currPage     this  attr  rel                var startItem   currPage   rowsShown              var endItem   startItem   rowsShown                  data tbody tr   css  opacity   0 0   hide   slice startItem  endItem                       css  display   table-row   animate  opacity 1   300                         JSfiddle  https   jsfiddle net u9d1ewsh

User · Answer

As far as I can see it on the website of that paginations plugin  the plugin itself doesn t do the actual pagination  The only thing it does is display a row of numbers  and display the correct buttons depending on the page you re on   However  to actually paginate  you have to write the appropriate Javascript yourself  This should be placed in stead of this Javascript   function test pageNumber       var page   page-id-  pageNumber        select   hide       page  show        Which is code I m guessing you ve copy-pasted from somewhere but at the moment doesn t really do anything  If you don t know Javascript  going with another library that actually does pagination of a table is something you probably want to do

User · Answer

For me  best and simplest way  Bootply http   www bootply com lxa0FF9yhw   First include Bootstrap to your project  Then include javascript file in which you write this code         fn pageMe   function opts       var  this   this          defaults                 perPage  7              showPrevNext  false              hidePageNumbers  false                    settings     extend defaults  opts        var listElement    this      var perPage   settings perPage       var children   listElement children        var pager       pager         if  typeof settings childSelector   undefined             children   listElement find settings childSelector              if  typeof settings pagerSelector   undefined             pager     settings pagerSelector              var numItems   children size        var numPages   Math ceil numItems perPage        pager data  curr  0        if  settings showPrevNext               lt li gt  lt a href     class  prev link  gt    lt  a gt  lt  li gt    appendTo pager              var curr   0      while numPages  gt  curr  amp  amp   settings hidePageNumbers  false                lt li gt  lt a href     class  page link  gt    curr 1    lt  a gt  lt  li gt    appendTo pager           curr               if  settings showPrevNext               lt li gt  lt a href     class  next link  gt    lt  a gt  lt  li gt    appendTo pager              pager find   page link first   addClass  active        pager find   prev link   hide        if  numPages lt  1            pager find   next link   hide              pager children   eq 1  addClass  active         children hide        children slice 0  perPage  show         pager find  li  page link   click function            var clickedPage     this  html   valueOf  -1          goTo clickedPage perPage           return false              pager find  li  prev link   click function            previous            return false              pager find  li  next link   click function            next            return false               function previous            var goToPage   parseInt pager data  curr    - 1          goTo goToPage              function next            goToPage   parseInt pager data  curr      1          goTo goToPage              function goTo page           var startAt   page   perPage              endOn   startAt   perPage           children css  display   none   slice startAt  endOn  show             if  page gt  1                pager find   prev link   show                      else               pager find   prev link   hide                       if  page lt  numPages-1                 pager find   next link   show                      else               pager find   next link   hide                       pager data  curr  page           pager children   removeClass  active            pager children   eq page 1  addClass  active                You need to give an id to the tbody of your table and to add a  div  after the table for the pagination        lt table class  table  id  myTable  gt               lt thead gt                   lt tr gt                       lt th gt     lt  th gt                   lt  tr gt               lt  thead gt               lt tbody id  myTableBody  gt               lt  tbody gt          lt  table gt          lt div class  col-md-12 text-center  gt              lt ul class  pagination pagination-lg pager  id  myPager  gt  lt  ul gt          lt  div gt    When your table s data is loaded  just call this      myTableBody   pageMe  pagerSelector   myPager  showPrevNext true hidePageNumbers false perPage 4      where the  perPage  value is to set how many elements per page you want to have

User · Answer

Pure js   Can apply it to multiple tables at once   Aborts if only one page is required   I used anushree as my starting point   Sorry to the asker  obviously this is not a simplePagignation js solution   However  it s the top google result when you type  javascript table paging   and it s a reasonable solution to many who may be considering a library but unsure whether to go that route or not   Use like this   addPagerToTables   someTable   8     Requires no css  though it may be wise to initially hide table tBody rows in css anyway to prevent the effect of rows showing then quicky being hidden  not happening with me right now  but it s something I ve seen before      The code   function addPagerToTables tables  rowsPerPage   10         tables            typeof tables     string          document querySelectorAll tables          tables       for  let table of tables           addPagerToTable table  rowsPerPage       function addPagerToTable table  rowsPerPage   10         let tBodyRows   table querySelectorAll  tBody tr        let numPages   Math ceil tBodyRows length rowsPerPage        let colCount           slice call          table querySelector  tr   cells            reduce  a b    gt  a   parseInt b colSpan   0        table      createTFoot        insertRow        innerHTML     lt td colspan   colCount  gt  lt div class  nav  gt  lt  div gt  lt  td gt         if numPages    1          return       for i   0 i  lt  numPages i               let pageNum   i   1           table querySelector   nav            insertAdjacentHTML               beforeend                 lt a href     rel    i   gt   pageNum  lt  a gt                                   changeToPage table  1  rowsPerPage        for  let navA of table querySelectorAll   nav a            navA addEventListener               click                e   gt  changeToPage                  table                   parseInt e target innerHTML                    rowsPerPage                              function changeToPage table  page  rowsPerPage         let startItem    page - 1    rowsPerPage      let endItem   startItem   rowsPerPage      let navAs   table querySelectorAll   nav a        let tBodyRows   table querySelectorAll  tBody tr         for  let nix   0  nix  lt  navAs length  nix               if  nix    page - 1              navAs nix  classList add  active            else              navAs nix  classList remove  active             for  let trix   0  trix  lt  tBodyRows length  trix                 tBodyRows trix  style display                     trix  gt   startItem  amp  amp  trix  lt  endItem                     table-row                     none

User · Answer

Use tr to  lt tr  class  quot paginate quot  gt    Pagination  lt div id  quot page-nav quot  gt  lt  div gt     Script   lt script gt          jQuery function                     Grab whatever we need to paginate             var pageParts      quot  paginate quot                        How many parts do we have              var numPages   100                 How many parts do we want per page              var perPage   10                      When the document loads we re on page 1                So to start with    hide everything else             pageParts slice perPage  hide                   Apply simplePagination to our placeholder                quot  page-nav quot   pagination                   items  numPages                  itemsOnPage  perPage                  cssStyle   quot light-theme quot                      We implement the actual pagination                      in this next function  It runs on                      the event that a user changes page                 onPageClick  function pageNum                           Which page parts do we show                      var start   perPage    pageNum - 1                       var end   start   perPage                              First hide all page parts                        Then show those just for our page                     pageParts hide                            slice start  end  show                                                       lt  script gt

User · Answer

It is a very simple and effective utility build in jquery to implement pagination on html table http   tablesorter com docs example-pager html  Download the plugin from http   tablesorter com addons pager jquery tablesorter pager js  After adding this plugin add following code in head script    document  ready function             table         tablesorter  widthFixed  true  widgets    zebra           tablesorterPager  container      pager

User · Answer

you can use this function   Its taken from https   convertintowordpress com simple-jquery-table-pagination-code   function pagination        var req num row 10      var  tr jQuery  tbody tr        var total num row  tr length      var num pages 0      if total num row   req num row   0           num pages total num row   req num row            if total num row   req num row  gt  1           num pages total num row   req num row          num pages            num pages Math floor num pages               for var i 1  i lt  num pages  i             jQuery   pagination   append   lt a href     class  btn  gt   i   lt  a gt                tr each function i           jQuery this  hide            if i 1  lt   req num row                tr eq i  show                           jQuery   pagination a   click function e           e preventDefault             tr hide            var page jQuery this  text            var temp page-1          var start temp req num row            alert start            for var i 0  i lt  req num row  i                   tr eq start i  show

User · Answer

There s a easy way to paginate a table using breedjs  jQuery plugin   see the example   HTML   lt table gt     lt thead gt       lt tr gt         lt th gt Name lt  th gt         lt th gt Gender lt  th gt         lt th gt Age lt  th gt         lt th gt Email lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr b-scope  people  b-loop  person in people  b-paginate  5  gt         lt td gt   person name   lt  td gt         lt td gt   person gender   lt  td gt         lt td gt   person age   lt  td gt         lt td gt   person email   lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt   lt ul gt  lt  ul gt    JS  var data   people                             function       breed run       scope   people       input  data      runEnd  function      This runEnd is just to mount the page buttons         for i 1   i lt  breed getPageCount  people     i                ul   append                  lt li gt                 html  i              onclick   breed paginate  scope   people   page      i                                                           Every time you want to change pages  just call   breed paginate  scope   people   page  pageNumber     More info   Working example

[javascript] How to use pagination on HTML tables?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

[javascript] How to use pagination on HTML tables?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to pagination