• Stars
    star
    114
  • Rank 298,325 (Top 7 %)
  • Language
    PHP
  • License
    Other
  • Created almost 11 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A generic, Twitter Bootstrap compatible, pagination library for automatically generating navigation links

zebrajs

Zebra Pagination  Tweet

A generic, Twitter Bootstrap compatible, pagination library that automatically generates navigation links

Latest Stable Version Total Downloads Monthly Downloads Daily Downloads License

A generic, Twitter Bootstrap compatible (versions 3, 4 and 5), pagination script that automatically generates navigation links as well as next/previous page links, given the total number of records and the number of records to be shown per page. Useful for breaking large sets of data into smaller chunks, reducing network traffic and, at the same time, improving readability, aesthetics and usability.

Adheres to pagination best practices (provides large clickable areas, doesn't use underlines, the selected page is clearly highlighted, page links are spaced out, provides "previous page" and "next page" links, provides "first page" and "last page" links - as outlined in an article by Faruk Ates from 2007, which can now be found here, can generate links both in natural as well as in reverse order, can be easily, localized, supports different positions for next/previous page buttons, supports page propagation via GET or via URL rewriting, is SEO-friendly, and the appearance is easily customizable through CSS.

Please note that this is a generic pagination script, meaning that it does not display any records and it does not have any dependencies on database connections or SQL queries, making it very flexible! It is up to the developer to fetch the actual data and display it based on the information returned by this pagination script. The advantage is that it can be used to paginate over records coming from any source like arrays or databases.

The code is heavily commented and generates no warnings/errors/notices when PHP's error reporting level is set to E_ALL.

Features

  • it is a generic library: can be used to paginate records both from an array or from a database
  • it automatically generates navigation links, given the total number of items and the number of items per page (examples of best practices are also included)
  • navigation links can be generated in natural or in reverse order
  • it is SEO-friendly - it solves the problem of duplicate content on the first page without navigation and the first page having the page number in the URL
  • appearance is easily customizable through CSS
  • compatible with Twitter Bootstrap versions 3, 4 and 5
  • code is heavily commented and generates no warnings/errors/notices when PHP's error reporting level is set to E_ALL
  • has awesome documentation

📔 Documentation

Check out the awesome documentation!

🎂 Support the development of this project

Your support means a lot and it keeps me motivated to keep working on open source projects.
If you like this project please it by clicking on the star button at the top of the page.
If you are feeling generous, you can buy me a coffee by donating through PayPal, or you can become a sponsor.
Either way - Thank you! 🎉

Star it on GitHub Donate

Requirements

PHP 5+

Installation

You can install Zebra Pagination via Composer

# get the latest stable release
composer require stefangabos/zebra_pagination

# get the latest commit
composer require stefangabos/zebra_pagination:dev-master

Or you can install it manually by downloading the latest version, unpacking it, and then including it in your project

require_once 'path/to/Zebra_Pagination.php';

How to use

Make sure that in the of your page you have

<!-- you don't need this if you're using Twitter Bootstrap -->
<link rel="stylesheet" href="path/to/zebra_pagination.css" type="text/css">

If you want to preserve hashes in the URL, also include the JavaScript file – simply including it will suffice; (jQuery needs to also be loaded before loading this file)

<script src="path/to/zebra_pagination.js"></script>

Paginate data from an array:

The PHP

<?php

// let's paginate data from an array...
$countries = array(
    // array of countries
);

// how many records should be displayed on a page?
$records_per_page = 10;

// include the pagination class
require 'path/to/Zebra_Pagination.php';

// instantiate the pagination object
$pagination = new Zebra_Pagination();

// the number of total records is the number of records in the array
$pagination->records(count($countries));

// records per page
$pagination->records_per_page($records_per_page);

// here's the magic: we need to display *only* the records for the current page
$countries = array_slice(
    $countries,
    (($pagination->get_page() - 1) * $records_per_page),
    $records_per_page
);

?>

<table>
    <thead>
    <tr>
        <th>Country</th>
    </tr>
    </thead>
    <tbody>
    <?php foreach ($countries as $index => $country): ?>
    <tr<?php echo $index % 2 ? ' class="even"' : ''; ?>>
        <td><?php echo $country; ?></td>
    </tr>
    <?php endforeach; ?>
    </tbody>
</table>

<?php

// render the pagination links
$pagination->render();

Would result is something like

Zebra_Pagination, default layout

You can set the navigation links' position to the left or to the right of the pagination links using the navigation_position() method:

$pagination->navigation_position('left');

Zebra_Pagination, position next/previous buttons on the left

$pagination->navigation_position('right');

Zebra_Pagination, position next/previous buttons on the right

Labels for "Previous" and "Next" links can be changed with the labels() method:

$pagination->labels('Previous', 'Next');

Zebra_Pagination, using labels for navigating to next/previous pages

You can also have HTML markup as labels making it easy to include font icons like the ones from Font Awesome

$pagination->labels('<i class="fa fa-arrow-left"></i>', '<i class="fa fa-arrow-right"></i>');

Zebra_Pagination, using icons for navigating to next/previous pages

Using condensed navigation where only links to first, last, next and previous pages are available. Useful when there isn't enough space for a full blown pagination.

$pagination->condensed();

Zebra_Pagination, condensed navigation

Using extra condensed navigation where only links next and previous pages are available. Useful when there isn't enough space for a full blown pagination.

$pagination->condensed(true);

Zebra_Pagination, condensed navigation

Paginate data from MySQL:

<?php

// connect to a database
$connection = mysqli_connect($host, $username, $password, $database);

// how many records should be displayed on a page?
$records_per_page = 10;

// include the pagination class
require 'path/to/Zebra_Pagination.php';

// instantiate the pagination object
$pagination = new Zebra_Pagination();

// the MySQL statement to fetch the rows
$sql = '
    SELECT
        country
    FROM
        countries
    LIMIT
        ' . (($pagination->get_page() - 1) * $records_per_page) . ', ' . $records_per_page . '
';

// execute the MySQL query
// (you will use mysqli or PDO here, but you get the idea)
$result = mysqli_query($connection, $sql) or die(mysqli_error($connection));

// fetch the total number of records in the table
$rows = mysqli_fetch_assoc(mysqli_query($connection, 'SELECT COUNT(*) AS rows FROM countries'));

// pass the total number of records to the pagination class
$pagination->records($rows['rows']);

// records per page
$pagination->records_per_page($records_per_page);

?>

<table>
    <thead>
    <tr>
        <th>Country</th>
    </tr>
    </thead>
    <tbody>
    <?php $index = 0; while ($row = mysqli_fetch_assoc($result)): ?>
    <tr<?php echo $index++ % 2 ? ' class="even"' : ''; ?>>
        <td><?php echo $row['country']; ?></td>
    </tr>
    <?php endwhile; ?>
    </tbody>
</table>

<?php

// render the pagination links
$pagination->render();

Paginate data from MySQL in reverse order:

<?php

// connect to a database
$connection = mysqli_connect($host, $username, $password, $database);

// how many records should be displayed on a page?
$records_per_page = 10;

// include the pagination class
// (you don't need this if you are using Composer)
require 'path/to/Zebra_Pagination.php';

// instantiate the pagination object
$pagination = new Zebra_Pagination();

// show records in reverse order
$pagination->reverse(true);

// when showing records in reverse order, we need to know the total number
// of records from the beginning
$result = mysqli_query($connection, 'SELECT COUNT(*) AS rows FROM countries'))) or die (mysqli_error());

// pass the total number of records to the pagination class
$pagination->records(array_pop(mysqli_fetch_assoc($result)));

// records per page
$pagination->records_per_page($records_per_page);

// the MySQL statement to fetch the rows
// note the LIMIT - use it exactly like that!
// also note that we're ordering data descendingly - most important when we're
// showing records in reverse order!
$sql = '
    SELECT
        country
    FROM
        countries
    ORDER BY
        country DESC
    LIMIT
        ' . (($pagination->get_pages() - $pagination->get_page()) * $records_per_page) . ', ' . $records_per_page . '
';

// run the query
mysqli_query($connection. $sql) or die(mysqli_error($connection));

?>

<table>
    <thead>
    <tr>
        <th>Country</th>
    </tr>
    </thead>
    <tbody>
    <?php $index = 0; while ($row = mysqli_fetch_assoc($result)): ?>
    <tr<?php echo $index++ % 2 ? ' class="even"' : ''; ?>>
        <td><?php echo $row['country']; ?></td>
    </tr>
    <?php endwhile; ?>
    </tbody>
</table>

<?php

// render the pagination links
$pagination->render();

Would result in something like

Zebra_Pagination

More Repositories

1

world_countries

Constantly updated lists of world countries and their associated alpha-2, alpha-3 and numeric country codes as defined by the ISO 3166 standard, available in CSV, JSON , PHP, SQL and XML formats, in multiple languages and with national flags included; also available are the ISO 3166-2 codes of provinces/ states associated with the countries
PHP
1,316
star
2

Zebra_Datepicker

A super-lightweight, highly configurable, cross-browser date time picker jQuery plugin
JavaScript
401
star
3

Zebra_cURL

A high-performance solution for making HTTP requests from your PHP projects. It allows running of multiple requests concurrently, asynchronously, supports GET, POST, HEADER, PUT, PATCH, and DELETE requests, and offers support for caching, FTP downloads, HTTP authentication and proxy requests.
PHP
209
star
4

Zebra_Session

A drop-in replacement for PHP's default session handler which stores session data in a MySQL database, providing better performance, better security and protection against session fixation and session hijacking
PHP
168
star
5

Zebra_Dialog

A small, compact, and highly configurable jQuery plugin for creating beautiful modal dialog boxes
JavaScript
155
star
6

Zebra_Image

A single-file lightweight PHP library designed for efficient image manipulation featuring methods for modifying images and applying filters
PHP
138
star
7

Zebra_Database

A compact, lightweight and feature-rich PHP MySQLi database wrapper
PHP
113
star
8

Zebra_Form

A jQuery augmented PHP library for creating secure HTML forms and validating them easily
PHP
98
star
9

Zebra_Mptt

A PHP library providing an implementation of the modified preorder tree traversal (MPTT) algorithm
PHP
80
star
10

Zebra_Pin

A lightweight and adaptive jQuery plugin for creating sticky elements pinned to the page or to a container element
JavaScript
67
star
11

Zebra_Tooltips

A lightweight, accessible, and highly configurable jQuery plugin for creating beautiful tooltips
JavaScript
54
star
12

Zebra_Accordion

A tiny (3KB minified, ~1.3KB gzipped), easily configurable, fully customizable, cross-browser jQuery accordion plugin
JavaScript
31
star
13

zebrajs

A modular, jQuery compatible, ultra light-weight JavaScript micro-library for modern browsers
JavaScript
30
star
14

Zebra_Gomoku

A ridiculously small JavaScript gomoku AI implementation, as a jQuery plugin
JavaScript
17
star
15

Zebra_TransForm

A tiny jQuery plugin for replacing and beautifying check boxes, radio buttons, and select boxes in IE7+
JavaScript
17
star
16

Zebra_Cookie

A ridiculously small (~500 bytes minified) JavaScript API for writing, reading and deleting browser cookies
JavaScript
16
star
17

Zebra_ClearInput

A tiny jQuery plugin for enhancing web forms by allowing users to easily clear values in text input boxes
JavaScript
5
star
18

Zebra_Cache

A file-based lightweight PHP caching library that uses file locking to ensure proper functionality under heavy load
PHP
1
star