Easy jQuery Pagination Plugin For Large Amounts Of Data - anypaginator

anypaginator is a lightweight jQuery pagination plugin that can be used to navigate through large amounts of data without having to load the entire page.

This plugin is simple to set up and easy to use. It supports handling almost all data types like tables, HTML lists, and even remote JSON data.

Released under the AGPL v3 license.

How to use it:

1. Include the main script anyPaginator.js after loading the latest jQuery library.

<link href="/path/to/anyPaginator.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/anyPaginator.js"></script>

2. Use the anypaginator plugin to handle large amounts of data in a static HTML table.

<table id="mytable">
  <tbody>
  </tbody>
  <tfoot>
    <tr><td id="myfoot"></td></tr>
  </tfoot>
</table>

function refreshTable(pager,num)
{
  if (!pager)
    return;
  let page_no = 1;
  let tbody = $("#mytable > tbody");
  if (tbody.length)
    tbody.empty();
  for (let i=1; i<=num; i++) {
    // Display only items on current page
    if (!((i-1) % pager.options.rowsPerPage))
      ++page_no;
    if (page_no-1 == pager.currentPage) {
      tbody.append($("<tr><td>Local row "+i+"</td></tr>"));
    }
  }
} // refreshTable

function populatePager(pager,num)
{
  if (!pager)
    return;
  let page_no = 1;
  for (let i=1; i<=num; i++) {
    // Add a page number each rowsPerPage rows
    if (!((i-1) % pager.options.rowsPerPage)) {
      pager.anyPaginator("add");
      ++page_no;
    }
  }
} // populatePager

// Initialize paginator in tfoot
let num = 200;
let pager =  $("#myfoot").anyPaginator({ 
    mode: 0, // 0: buttons, 1: item range, 2: page number
    onClick: function() { refreshTable(pager,num); },
    rowsPerPage: 5,
});

// Display table contents
refreshTable(pager,num);

// Add page numbers
populatePager(pager,num);

3. Apply your own CSS styles to the pagination links.

.any-paginator-container {
  margin-top:   10px;
  background:   white;
  font:         12px Verdana, sans-serif;
}

.any-paginator-btn {
  margin-right: 1px;
  white-space:  nowrap;
  display:      inline-block;
  min-width:    20px;
  text-align:   center;
  border-radius:3px;
  color:        #fc5200;
  cursor:       pointer;
}

.any-paginator-num {
  border:       1px solid #fc5200;
}

.any-paginator-ellipsis {
  border:       1px solid white;
  color:        #888;
  cursor:       default;
}

.any-paginator-inactive {
  color:        #aaa;
}

.any-paginator-compact {
  margin-right: 1px;
  white-space:  nowrap;
  display:      inline-block;
  min-width:    20px;
  text-align:   center;
  color:        #333;
}

.any-paginator-goto {
  white-space:  nowrap;
  display:      inline-block;
}

#anyPaginator_goto_inp {
  min-width:        22px;
  max-width:        22px;
  min-height:       unset;
  margin-right:     3px;
  padding:          1px;
  padding-top:      0px;
  padding-bottom:   0px;
  white-space:      nowrap;
  display:          inline-block;
  text-align:       center;
  font:             12px Verdana, sans-serif;
}

#anyPaginator_goto_inp:focus {
  outline:      none;
}

#anyPaginator_goto_btn {
  padding:      2px;
  white-space:  nowrap;
  display:      inline-block;
  cursor:       pointer;
}

#anyPaginator_goto_btn:hover {
  padding:      1px;
  border:       1px solid #ddd;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Currently supported by
                                  Vivaldi, Opera, Chrome, Edge and Firefox */
}

4. This example shows how to handle remote data.

<table id="mytable">
  <tbody>
  </tbody>
  <tfoot>
    <tr><td id="myfoot"></td></tr>
  </tfoot>
</table>

let dataSource = "/path/to/remote/data/";

function refreshTable(pager,num)
{
  if (!pager)
    return;
  let from = pager.options.rowsPerPage *(pager.currentPage - 1);
  let to   = from + pager.options.rowsPerPage - 1;
  let db_url = dataSource + "remote_select.php?from="+from+"&to="+to;
  $.getJSON(db_url)
  .done( function(data,textStatus,jqXHR) {
    if (textStatus == "success") {
      let tbody = $("#mytable > tbody");
      if (tbody.length)
        tbody.empty();
      // Display all items received
      for (const i in data)
        tbody.append($("<tr><td>"+data[i]+"</td></tr>"));
      populatePager(pager,num,pager.currentPage);
    }
    else
    if (textStatus == "error")
      console.log("Error: "+jqXHR.status+": "+jqXHR.statusText);
  })
  .fail(function(jqXHR,textStatus,error) {
      console.error("Server error (select):"+jqXHR.responseText);
  });
} // refreshTable

function populatePager(pager,num,page)
{
  if (!pager)
    return;
  pager.reset();
  let page_no = 1;
  for (let i=1; i<=num; i++) {
    // Add a page number each rowsPerPage rows
    if (!((i-1) % pager.options.rowsPerPage)) {
      pager.anyPaginator("add");
      ++page_no;
    }
  }
  pager.showPage(page);
} // populatePager

// Create remote table
let num = 70; // Number of rows
let db_url = dataSource + "remote_create.php?num="+num;
$.getJSON(db_url)
.done( function(data,textStatus,jqXHR) {

  // Initialize paginator in tfoot
  let pager =  $("#myfoot").anyPaginator({ 
      mode:        0,
     onClick:     function() { refreshTable(pager,num); },
     rowsPerPage: 5,
     prevText:    "<",
     nextText:    ">",
  });

  // Display table contents
  refreshTable(pager,num);

  // Add page numbers
  populatePager(pager,num);

})

.fail(function(jqXHR,textStatus,error) {
  console.error("Server error (create):"+jqXHR.responseText);
});

5. All default options.

let pager =  $("#myfoot").anyPaginator({ 

    // 0: buttons, 1: item range, 2: page number
    mode:        0,

    // If true, hide the paginator if there is only one page
    hideIfOne:    true,
    
    // Number of items per page
    itemsPerPage: 20,  

    // Text in front of page number for mode == 1
    pageText:     "Page",     

    // Text in front of item range for mode == 2     
    itemText:     "Item",      

    // Text on the "go" button
    gotoText:    "Go",      

    // Text on the "previous" button, ignored if prevIcon is not null
    prevText:    "«", 

    // Text on the "next" button, ignored if nextIcon is not null
    nextText:    "»", 

    // Text on the "first" button, ignored if firstIcon is not null
    firstText:   "|<",     

    // Text on the "last" button, ignored if lastIcon is not null 
    lastText:    ">|",      

    // Icon on the "go" button instead of gotoText
    gotoIcon:    null,      

    // Icon on the "previous" button instead of prevText
    prevIcon:    null,      

    // Icon on the "next" button instead of nextText
    nextIcon:    null,      

    // Icon on the "first" button instead of firstText
    firstIcon:   null,      

    // Icon on the "last" button instead of lastText
    lastIcon:    null,      

    // Whether to hide the "goto page" button/input field
    hideGoto:    false,     

    // Whether to hide the "previous" button
    hidePrev:    false,     

    // Whether to hide the "next" button
    hideNext:    false,     

    // Whether to hide the "first" button. Should be "true" if splitLeft == 1
    hideFirst:   true,      

    // Whether to hide the "last" button. Should be "true" if splitRight == 1
    hideLast:    true,      

    // Number of split buttons to the left
    splitLeft:   3,         

    // Number of split buttons in the middle
    splitMiddle: 3,         

    // Number of split buttons to the right
    splitRight:  3,         

});

6. API methods.

// reset the plugin
pager.reset({
  // options
});

// get the number of pages
pager.numPages();

// get the current page
pager.currentPage();

// get the number of items
pager.numItems();

// set the number of items
pager.numItems(10);

// increase/decrease number of items by 1
pager.addItem();
pager.removeItem();

// get the current options & values
pager.option();
pager.option(optionName);

// update options
pager.option({
  // options
});

// refresh
pager.refresh();

// increase/decrease number of pages by 1
pager.addPage();
pager.removePage();

// show page x
pager.showPage(x);

Changelog:

v1.1.0 (2023-04-05)

• Enable setting of non-truthy values in setters, such as zero and false; Fix some bugs.
• Make the jQuery element of the pager remember attributes from the pager, to allow for more flexible use.
• Other minor bugfixes and "cosmetic" changes.

2023-04-05

• Minor CSS change.

2022-02-08

• Added a few missing semicolons to make the minifier happy.

2022-02-05

• Further (minor) CSS improvements.

2022-02-04

• Override css height of goto input field.

2022-01-27

• Split the any-paginator-compact CSS class into two separate classes.

2022-01-26

• Bugfix: Added class any-paginator-goto-btn.
• Added a "baseId" in order to make it possible to have several paginators simultaneously.

2022-01-21

• JS & CSS update

2022-01-18

• Minor improvements.

2022-01-14

• Bugfix
• CSS tweaks
• API updated

2022-01-13

• Bugfix

---

This awesome jQuery plugin is developed by arnemorken. For more Advanced Usages, please check the demo page or visit the official website.