SimplePager

Developer
Ruslan Marin
Size
4,584 Kb
Views
8,096
  1. SimplePager Previews
  2. SimplePager HTML Codes
  3. SimplePager JS Codes

How do I make an simplepager?

What is a simplepager? How do you make a simplepager? This script and codes were developed by Ruslan Marin on 07 December 2022, Wednesday.

SimplePager Previews
IQ Test

SimplePager - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SimplePager</title>
</head>
<body> <div id="yyy"></div>
<hr />
<div id="xxx"></div>
<hr />
<div id="zzz"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SimplePager - Script Codes JS Codes

"use strict";
function SimplePager(options) { var _self = this; var _$pager = $("<div/>"); var _$mountPoint; var _itemsCount; var _pageSize; var _hideIfSinglePage; var _currentPageIndex = 0; var _changeHandlers = []; var _firstButton; var _prevButton; var _nextButton; var _lastButton; var _$currentPageText; var _getLastPageIndex = function _getLastPageIndex() { return Math.ceil(_itemsCount / _pageSize) - 1; }; var _isFirstPage = function _isFirstPage() { return _currentPageIndex === 0; }; var _isLastPage = function _isLastPage() { return _currentPageIndex === _getLastPageIndex(); }; var _getChangeEventArgs = function _getChangeEventArgs() { var firstItemIndex = _pageSize * _currentPageIndex; var tempLastItemIndex = firstItemIndex + _pageSize - 1; return { firstItemIndex: firstItemIndex, lastItemIndex: tempLastItemIndex < _itemsCount ? tempLastItemIndex : _itemsCount - 1, currentPageIndex: _currentPageIndex, lastPageIndex: _getLastPageIndex() }; }; var _invokeChangeEvent = function _invokeChangeEvent() { var eventArgs = _getChangeEventArgs(); for (var i = 0; i < _changeHandlers.length; i++) { _changeHandlers[i](eventArgs); } }; var _updatePager = function _updatePager() { _firstButton.setState(!_isFirstPage()); _prevButton.setState(!_isFirstPage()); _nextButton.setState(!_isLastPage()); _lastButton.setState(!_isLastPage()); _$currentPageText.val(_currentPageIndex + 1); _$pager.toggle(_getLastPageIndex() > 0 || !_hideIfSinglePage); }; var PagerButton = function PagerButton($activeContent, $inactiveContent, clickHandler) { this.$activeContent = $activeContent; this.$inactiveContent = $inactiveContent; this.$container = $("<span style='padding: 2px; cursor: pointer;'></span>"); this.$container.click(clickHandler); }; PagerButton.prototype.setState = function (state) { this.$container.empty(); this.$container.append(state ? this.$activeContent : this.$inactiveContent); }; this.addChangeHandler = function (changeHandler) { _changeHandlers.push(changeHandler); changeHandler(_getChangeEventArgs()); }; this.removeChangeHandler = function (changeHandler) { var indexOfHandlerToRemove = _changeHandlers.indexOf(changeHandler); if (indexOfHandlerToRemove >= 0) { _changeHandlers.splice(indexOfHandlerToRemove, 1); } }; this.remove = function () { _$pager.remove(); }; this.setItemsCount = function (itemsCount) { _itemsCount = itemsCount; _currentPageIndex = 0; _invokeChangeEvent(); }; (function init() { if (!options.mountPoint) { throw new Error("mountPoint not defined"); } _$mountPoint = $(options.mountPoint); if (!_$mountPoint) { throw new Error("Bad mountPoint"); } _itemsCount = options.itemsCount; if (_itemsCount == undefined) { throw new Error("Items count not defined"); } _pageSize = options.pageSize || 10; _hideIfSinglePage = options.hideIfSinglePage || false; if (options.className) { _$pager.addClass(options.className); } if (options.style) { _$pager.css(options.style); } })(); (function buildPager() { _firstButton = new PagerButton($("<span style='border: 3px solid green;'>First</span>"), $("<span style='border: 3px solid red;'>First</span>"), function () { if (_currentPageIndex === 0) { return; } _currentPageIndex = 0; _invokeChangeEvent(); }); _prevButton = new PagerButton($("<span style='border: 3px solid green;'>Prev</span>"), $("<span style='border: 3px solid red;'>Prev</span>"), function () { if (_currentPageIndex === 0) { return; } _currentPageIndex--; _invokeChangeEvent(); }); _$currentPageText = $("<input disabled='disabled' />"); _$currentPageText.css({ background: "white", borderWidth: "1px", width: "3em", height: "12px", textAlign: "center" }); _nextButton = new PagerButton($("<span style='border: 3px solid green;'>Next</span>"), $("<span style='border: 3px solid red;'>Next</span>"), function () { if (_currentPageIndex === _getLastPageIndex()) { return; } _currentPageIndex++; _invokeChangeEvent(); }); _lastButton = new PagerButton($("<span style='border: 3px solid green;'>Last</span>"), $("<span style='border: 3px solid red;'>Last</span>"), function () { if (_currentPageIndex === _getLastPageIndex()) { return; } _currentPageIndex = _getLastPageIndex(); _invokeChangeEvent(); }); _$pager.append(_firstButton.$container).append(_prevButton.$container).append(_$currentPageText).append(_nextButton.$container).append(_lastButton.$container); _$mountPoint.append(_$pager); _self.addChangeHandler(_updatePager); _invokeChangeEvent(); })();
}
////////////////////////////////
var strings = ["1002", "800", "120", "1200", "300", "750", "4000", "430", "220", "5000", "300", "5200"];
var pager = new SimplePager({ mountPoint: document.getElementById("xxx"), itemsCount: strings.length, pageSize: 5, hideIfSinglePage: true, style: { margin: "1em" }
});
var pagerChangeHandler = function pagerChangeHandler(data) { var output = strings.map(function (item, index) { return index + 1 + ". $" + item; }).slice(data.firstItemIndex, data.lastItemIndex + 1).join(", "); $("#yyy").text(output);
};
pager.addChangeHandler(pagerChangeHandler);
$("<button />").text("Remove pager").appendTo($("#zzz")).click(function () { pager.remove();
});
$("<button />").text("Set items count to 5").appendTo($("#zzz")).click(function () { pager.setItemsCount(5);
});
$("<button />").text("Set items count to 15").appendTo($("#zzz")).click(function () { pager.setItemsCount(15);
});
$("<button />").text("Add handler").appendTo($("#zzz")).click(function () { pager.addChangeHandler(pagerChangeHandler);
});
$("<button />").text("Remove handler").appendTo($("#zzz")).click(function () { pager.removeChangeHandler(pagerChangeHandler);
});
SimplePager - Script Codes
SimplePager - Script Codes
Home Page Home
Developer Ruslan Marin
Username marinru
Uploaded December 07, 2022
Rating 3
Size 4,584 Kb
Views 8,096
Do you need developer help for SimplePager?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ruslan Marin (marinru) Script Codes
Name
BnW
Rotating Cubes with p5.js
Vue.js User Input
Sidescroller with p5.js
Vue 001. Hello World
Vue.js Attribute Binding
Knockout Lists
Socket.io Client Demo
Vue.js Conditional Visibility
KO Components Demo
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!