Create Table Pagination Using JavaScript

table-footer-pagination.js

'use strict'

function HTMLPagination(wrapper, props) {
  this.container = wrapper
  this.container.style = "display: flex; justify-content: space-between;"
  this.showPagination = props.showPagination
  this.showPageInfo = props.showPageInfo
  this.showLoadMore = props.showLoadMore
}

HTMLPagination.prototype.render = function() {
  // Create first block
  var firstDiv = document.createElement('div')
  this.createParagraph(firstDiv, 'Show', 'color: rgb(84, 105, 141); font-size: 14px; display: inline;')
  this.createSelect(firstDiv, [
    {
      text: 'First',
      value: 1,
      onClick: null,
    },
    {
      text: 'Second',
      value: 2,
    }
  ], function(event) {
    console.log('onchange', event)
  })
  this.createParagraph(firstDiv, 'Terms Per Page', 'color: rgb(84, 105, 141); font-size: 14px; display: inline;')

  if (this.showLoadMore) {
    this.createButton(
      firstDiv,
      'Load More', 'border-radius: 4px; padding: 7px 12px; margin-top: 2px; background-color: #EEE; border: 0; color: rgb(84, 105, 141); font-size: 10px; display: inline;',
      function() {
        console.log('Button clicked')
      }
    )
  }

  // Create second block
  if (this.showPageInfo) {
    var secondDiv = document.createElement('div')
    secondDiv.style = 'position: relative; top: 5px;'
    this.createParagraph(secondDiv, 'Showing Rows 1-25 of 50+', 'color: rgb(84, 105, 141); font-size: 14px; display: inline;')
  }

  // Create third block
  if (this.showPagination) {
    var lastDiv = document.createElement('div')
    lastDiv.style = 'position: relative; top: 6px;'
    this.createList(lastDiv, [
      {
        isActive: false,
        onClick: function(event) {
          console.log('Clicked', event)
        },
        text: 'First',
      },
      {
        isActive: false,
        onClick: null,
        text: 'Previous',
      },
      {
        isActive: true,
        onClick: null,
        text: '1',
      },
      {
        isActive: false,
        onClick: null,
        text: '2',
      },
      {
        isActive: false,
        onClick: null,
        text: 'Next',
      },
      {
        isActive: false,
        onClick: null,
        text: 'Last'
      },
    ])
  }
}

HTMLPagination.prototype.createParagraph = function(div, content, style) {
  var p = document.createElement('p')
  p.style = style
  p.innerHTML = content

  // Renderer
  var targetDiv = this.container.appendChild(div)
  targetDiv.appendChild(p)
}

HTMLPagination.prototype.createButton = function(div, content, style, callback) {
  var button = document.createElement('button')
  button.style = style
  button.innerHTML = content

  // Renderer
  var targetDiv = this.container.appendChild(div)
  targetDiv.appendChild(button)

  if(typeof callback === "function") {
    button.onclick = callback
  }
}

HTMLPagination.prototype.createList = function(div, lists) {
  var listView = document.createElement('ul');
  listView.style = 'display: inline;list-style-type: none;margin: 0px;padding: 0px;'
  for (var i=0; i < lists.length; i++) {
    var listViewItem = document.createElement('li');
    if (lists[i].isActive) {
      listViewItem.style = 'display: inline; padding: 0px 5px; color: #13174f;'
    } else {
      listViewItem.style = 'display: inline; padding: 0px 5px; color: #999;'
    }
    if (typeof lists[i].onClick === "function") {
      listViewItem.onclick = lists[i].onClick
    }
    listViewItem.appendChild(document.createTextNode(lists[i].text));
    listView.appendChild(listViewItem);
  }

  var targetDiv = this.container.appendChild(div)
  targetDiv.appendChild(listView)
}

HTMLPagination.prototype.createSelect = function(div, options, onchange) {
  var selectcontainer = document.createElement("select");
  selectcontainer.onchange = onchange
  options.forEach(function(item, key) {
    var option = new Option(item.text, item.value);
    selectcontainer.options[key] = option;
  })

  // Renderer
  var targetDiv = this.container.appendChild(div)
  targetDiv.appendChild(selectcontainer)
}

// init
var pagination = new HTMLPagination(document.getElementById('pagination'), {
  showPagination: true,
  showPageInfo: true,
  showLoadMore: true,
})

pagination.render()