Universal Data Pagination Component – Pagination System

Preview:

Description:

Pagination refers to the process of splitting a large data set into small chunks to make it easier and faster to browse, which is often necessary in applications that deal with large content sets. In general, you need pagination when you have more than one hundred records and want your application to load quickly.

Pagination System is a feature-rich pagination UI component that allows you to create faster and easily paginated data by utilizing the power of plain HTML/JavaScript/CSS. No other JavaScript framework dependency.

It supports pagination for any kind of data like tables, lists, text, images, dynamic data fetched from the server, etc.

How to use it:

1. Install and import the Pagination System.

# NPM
$ npm i pagination-system

// As an ES module
import PaginationSystem from 'pagination-system';
// Necessary stylesheet
import 'pagination-system/dist/pagination-system.min.css';

// UMD Version
<link rel="stylesheet" href="/path/to/dist/pagination-system.min.css"/>
<script src="/path/to/dist/pagination-system.umd.min.js"></script>

2. Create a container to hold your data.

<div class="container"></div>

3. Create an empty DIV element to hold the pagination UI.

<div class="paging-container"></div>

4. Initialize the Pagination System and define your data to be paginated as follows:

new PaginationSystem({
    dataContainer: document.querySelector('.container'),
    dataRenderFn: dataRenderFn,
    data: data || [],
    pagingContainer: document.querySelector('.paging-container'),
    countRecords: data.length || 0,
});

// sample data
const loremIpsum = ['lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipiscing', 'elit', 'sed', 'do', 'eiusmod', 'tempor', 'incididunt', 'labore', 'et', 'dolore', 'magna', 'aliqua', 'ut', 'enim', 'ad', 'minim', 'veniam', 'quis', 'nostrud', 'exercitation', 'ullamco', 'laboris', 'nisi', 'aliquip', 'ex', 'ea', 'a', 'commodo', 'consequat', 'duis', 'aute', 'irure', 'in', 'reprehenderit', 'voluptate', 'velit', 'esse', 'cillum', 'fugait', 'nulla', 'pariatur', 'excepteur', 'sint', 'occaecat', 'cupidatat', 'non', 'proident', 'sunt', 'culpa', 'qui', 'officia', 'deserunt', 'mollit', 'anim', 'id', 'est', 'laborum', 'justo', 'fermentum', 'bibendum', 'massa', 'nunc', 'pulvinar', 'sapien', 'ligula', 'condimentum', 'vel', 'ero', 'ornare', 'egestas', 'dui', 'mi', 'nul', 'posuere', 'quam', 'vitae', 'proin', 'neque', 'nibh', 'morbi', 'tempus', 'urna', 'arcu', 'at', 'e', 'dapibus', 'qos', 'nam', 'convallis', 'aenean', 'cras', 'facilisis', 'laoreet', 'donec'];
const data = makeDataList();
  const dataRenderFn = (dataPage) => {
    return `<ul>${dataPage
      .map(
        (item) =>
          `<li><span class="item-counter">${item.number}</span> <span class="textline">${item.text}</span></li>`
      )
      .join('')}</ul>`;
};
function makeDataList() {
  let data = [];
  let words = '';
  for (let i = 0; i < 110; i++) {
    words = getRandomText().join(' ');
    data = [...data, { number: i + 1, text: words }];
  }
  return data;
}
function getRandomText() {
  const lenLorem = loremIpsum.length;
  let words = [];
  for (let i = 0; i < 10; i++) {
    let rand = randomNumber(lenLorem);
    words.push(loremIpsum[rand]);
  }
  if (words.length) {
    const firstWord = words[0];
    const firstLetter = firstWord[0].toUpperCase();
    const remainLetters = firstWord.slice(1);
    words[0] = firstLetter + remainLetters;
  }
  return words;
}
function randomNumber(count) {
  return Math.floor(count * Math.random());
}

5. Load data from an external data source.

<div class="container">
  <div class="data-container">
    <div class="list-cards"></div>
  </div>
</div>
<div class="paging-container"></div>
<div id="dimmer">
  <div class="loader"></div>
</div>

new PaginationSystem({
    dataContainer: document.querySelector(
      '.container .data-container .list-cards'
    ),
    dataRenderFn: dataRenderFn,
    childSelector: '.card',
    url: 'https://jsonplaceholder.typicode.com/posts', // test server url
    urlParams: {
      limit: '_limit', // url query param (number of items to display per page) optional
      pageNumber: '_page', // url query param (number of page)
    }, // url query params
    dimmerSelector: '#dimmer',
    pagingContainer: document.querySelector('.paging-container'),
    countRecords: 100,
    loading: 'auto', // 'auto'|'more'|'none'
});

const dataRenderFn = (dataPage) => {
  return `${dataPage
    .map(
      (item) =>
        `<div class="card">
          <div class="card-post">
            <div class="card-item-title">
              <span class="item-counter">${item.id}</span>
              <span class="item-title">${item.title
                .split(' ')
                .slice(0, 3)
                .join(' ')}</span>
            </div>
            <p class="item-body">${item.body}</p>
          </div>
        </div>`
    )
    .join('')}`;
};

6. Set the number of entries to display per page. Default: 10.

new PaginationSystem({
    perPage: 10,
});

7. Determine whether or not to show the perPage dropbox. Default: true.

new PaginationSystem({
    isShowPerPage: false,
});

Changelog:

v2.0.1 (06/12/2022)

• Added data sorting and filtering